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.
Related
I'm creating a modal window using bootstrap to show some text with an image. Problem is the image spills out of the modal. I've tried adding responsive class to the image but it did not worked.
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" id="modalBasic">
<div class="modal-dialog modal-sm modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Upgrade to Basic</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
<img src="./img/upi.jpg" class="img-responsive"/>
</div>
</div>
</div>
</div>
I've tried removing modal-sm class, but it failed on small screen.
Set the image's width property to 100% or add CSS property
.img-responsive { width: 100%; }
What you want to achieve is image should resize according to the width of the modal. Therefore image's width should adhere to the modal's width.
Working example: https://codesandbox.io/s/sharp-villani-1lsjw5?file=/index.html:2228-2298&resolutionWidth=456&resolutionHeight=675
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 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>
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