I am facing an issue on bootstrap modal dialog,
and i have no clue on how to solve this.
When I implement 2 modal dialog on a site, the click event on either one modal dialog sometimes do fire it's event but sometimes not firing at all... I did place a breakpoint but anyhow it doesn't enter the break point when i click on the button ..
I think both model some data is same. try it
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
Large modal
</div>
</div>
</div>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
Small modal
</div>
</div>
</div>
Related
The command below works but the main page is waiting for iframe to load opening for him takes a long time sometimes.
How can I get the iframe to load just by clicking the shortcut.
<li>
carlist
</li>
<div class="modal fade" id="carlist" tabindex="-1" role="dialog" data-toggle="modal3" aria-labelledby="myModalLabel" data-backdrop="false">
<div class="modal-dialog modal-fluid modal-notify modal-success" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Car List</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="text-center">
</div>
<iframe src="carlist.aspx" width="100%" height="500"></iframe>
</div>
Maybe you could use a button. When onClick you try to open the iframe.
Is carlist.aspx part of your project?
I was answering another question today where the modal window had clickable buttons in FF and non-clickable buttons in Chrome.
Though I have figured out the issue that chrome was setting z-index of modal's parent to 0 and FF was setting it to auto.
In the demo below a modal window is placed inside of .fixed div. To fix the issue I had set z-index of .fixed div more than .modal-backdrop (let's say 1041).
Then I thought why can't I set the z-index of .fixed div myself as auto as FF sets it to auto, but it still didn't work in Chrome.
Can anyone explain what's happening here.
$(function(){
$('.modal-body > span').html($('.fixed').css('z-index'));
});
.fixed{
position: fixed;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="fixed">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal testing</h4>
</div>
<div class="modal-body">
z-index: <span></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
z-index sets the order of elements within a stacking context. position:fixed on the parent element of the modal contents places it in a different stacking context than the .modal-backdrop, used to hide the rest of the page.
The common solution for this is to place all the instances of modal contents from the page as direct children of the body element, after page loads, using this line:
$('.modal[role="dialog"]').appendTo('body');
$(function(){
$('.modal-body > span').html($('.fixed').css('z-index'));
});
$('.modal[role="dialog"]').appendTo('body');
.fixed{
position: fixed;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="fixed">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal testing</h4>
</div>
<div class="modal-body">
z-index: <span></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Using bootstrap 3.3.5 and trying to open a second modal, and found a strange behavior:
The backdrop do not show around the second modal, instead of it
covers the backdrop from the first modal
The second modal is
limited to the area of the first modal.
Check the example: http://jsfiddle.net/2zqe93u1/show/
Looking for a way to show the second modal with the backdrop around it and with no area limited by the first modal.
Code:
<div class="modal bs-modal-lg" id="FirstModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="FiltroLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<span class="modal-title">Title #1</span>
</div>
<div class="modal-body">
<div class="modal" id="SecondModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title #2</h4>
</div>
<div class="modal-body">
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-number="2">Close</button>
</div>
</div>
</div>
</div>
<a data-toggle="modal" href="#SecondModal" class="btn btn-primary btn-block">Open the second modal</a>
</div>
<div class="modal-footer">
<a data-loading-text="Wait" class="btn btn-default">Cancel</a>
</div>
</div>
</div>
</div>
As said #Tim Lewis bootstrap doesn't support stacked modal and Showing more than one modal at a time requires custom code
First Remove 2nd modal HTML inside the First Modal and put it outside, so the HTML will be;
<div class="modal bs-modal-lg" id="FirstModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="FiltroLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<span class="modal-title">Title #1</span>
</div>
<div class="modal-body">
<a data-toggle="modal" href="#SecondModal" class="btn btn-primary btn-block">Open the second modal</a>
</div>
<div class="modal-footer">
<a data-loading-text="Wait" class="btn btn-default">Cancel</a>
</div>
</div>
</div>
</div>
<div class="modal" id="SecondModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title #2</h4>
</div>
<div class="modal-body">
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-number="2">Close</button>
</div>
</div>
</div>
</div>
It will fix the problem second modal is limited to the area of the first modal.
Now to fix the problem backdrop do not show around the second modal, instead of it covers the backdrop from the first modal
add following code in JS
$(document).ready(function () {
$('#SecondModal').on('show.bs.modal', function () {
$('#FirstModal').css('z-index', 1039);
});
$('#SecondModal').on('hidden.bs.modal', function () {
$('#FirstModal').css('z-index', 1041);
});
});
Fiddle
You have to work with two modals separeted to achieve this goal.
The first point i can do it with this
https://jsfiddle.net/2zqe93u1/
$('#FirstModal').modal('show');
$('#SecondModal').on('shown.bs.modal', function (e) {
$('.modal-backdrop').first().appendTo($(this).parent())
})
$('#SecondModal').on('hidden.bs.modal', function (e) {
$('.modal-backdrop').first().remove()
})
$("button[data-number=2]").click(function(){
$('#SecondModal').modal('hide');
});
But i can't understand the second one, if the second modal can be dragged out of the first, why the backdrop must be on the first?
But with the events ocurring on modal i'm sure you can do this.
Take a look at jsfiddle to catch the ideas
I am having trouble displaying a bootstrap modal on my site. The modal div is too tall and too narrow relative to the modal-dialog div.
This is where I am toggling the modal.
<footer>
<div id="header-footer-content" class="container">
Contact |
Privacy Policy
</div>
</footer>
And this is how I am defining the modal. (Note the modal is actually defined in a partial view in my rails project, but the html below is the result post-rendering.)
<div class="container>
<div class="row">...</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p>some text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
I'm using the example modal from the bootstrap website, so I'm not sure why it's being displayed like this. Does anyone have any experience with this kind of graphical issue?
EDIT: I am using bootstrap v3.3.4. The site can be found here.
I think it might have something to do with the container div you have wrapped around your modal. Try removing that and maybe also try removing the empty row at the top of it too.
i am using bootstrap modal in my asp.net project and my code is
<div id="mymodal" class="modal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a id ="closemodal" href="#" class="btn">Close</a>
Save changes
</div>
</div>
and my javascript in my master page is
<script type="text/javascript">
$(function () {
$('#closemodal').click(function () {
$('#mymodal').modal('hide');
});
});
</script>
but the modal doesn't closes when i click close button
in firebug, error is shown with the java-script writing it's not a function
The point of bootstrap is that you shouldn't need that jQuery to get it to work. You can delete that javascript and just add an attribute to your close button and it should work: (it is the data-dismiss="modal" that closes the modal popup.)
<div id="mymodal" class="modal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a id="closemodal" href="#" class="btn" data-dismiss="modal" aria-hidden="true">Close</a>
Save changes
</div>
</div>
You need the bootstrap javascript file included in your master page, which I assume must already be there if you have a modal popup that is popping up as normal.
<script language="JavaScript" type="text/javascript" src="bootstrap.min.js"></script>