I am having an issue with the Modal component of bootstrap.
The problem is that when I try to call the modal from the code behind it is showing up but the modal loses its efects, the background does not turn gray and the modal does not slide from the top.
Please find below my code.
<div class="modal" data-backdrop="static" data-keyboard="false" runat="server"
visible="false" id="myModalServicios" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
Code Behind:
myModalServices.Visible = true;
In your markup, the div's id is myModalServicios but your code behind references myModalServices
Related
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 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>
I have a modal window which open up when the user focuses on search input box. but currently when the modal opens, the modal background overlay blocks it.
How can i move the modal overlay background lower or something, so the user can still type on the search input box while the modal window stays opens .
<form>
<input type="email" class="form-control border-left-none" id="openmodalOnfocus" placeholder="enter text">
</form>
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<div class="row">
<div class=" col-md-4">
lorem i[p sum on left
</div>
<div class=" col-md-4">
lorem ipsom on right
</div>
</div>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
Just add this to your css:
.modal-backdrop {
z-index: -1;
opacity: 0 !important;
width: 0px;
height: 0px;
}
You can edit your CSS so the modal backdrop will never show:
.modal-backdrop {
display: none;
}
Check the docs for jQuery activation of Bootstrap modals here.
You can show a modal without the backdrop by simply adding the data-backdrop attribute to the modal div and setting it to false:
<div class="modal fade" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
I have a bunch of div's that are being displayed inside a bootstrap modal window which gets activated with a click of a button,
The problem is whenever i refresh the page and click on the button it opens up fine
but when i close the modal dialog box and re-click the button the div elements appear outside the modal window
This is the first time opening the modal dialog after i refresh the page
This is the second time opening the modal dialog after i close the first one (the div elements are overflowed outside the modal dialog box)
This is the code for my current modal-dialog
<div class="thumbnail"><img src="../Images/pix/place.png" href="#supket" data-toggle="modal" /></div><!-- calls the pop-up -->
<div class = "modal fade" id="supket" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>*** TITLE ****</h3>
</div>
<div class="modal-body">
<div id="supkettt" runat="server"></div><br /><br /></div> <!-- content of the modal-dialog -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
</div>
</div>
</div>
</div>
P.S: I'm using bootstrap 3.0 and i have about 4 modal boxes and this is the only one that i have problem with.
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>