Menu
Hi I'm using Bootstrap for the first time and I can't get my modal form to stay open on clicking the submit button. I've searched SO but all related questions deal with slightly different issues (example below).
Disallow twitter bootstrap modal window from closing
362
Show activity on this post. and write your html code in update panel then remove data-dismiss="modal" from the button. Hope it works for you. It would be great if you could add some explanation to your code.
When the Button is clicked, the HTML DIV is referenced using jQuery and its modal function is called along with properties data-backdrop: "static" and data-keyboard: false which disables the closing of the Bootstrap Modal Popup when clicked outside.
You can prevent closing of modal dialog by setting the beforeClose event argument cancel value to true. In the following sample, the dialog is closed when you enter the username value with minimum 4 characters.
Data-keyword="false" is to prevent closing modal while clicking Esc button, while data-backdrop="static" , allows you keep modal pop-up opened when clicking on Gray area.
Remove the following:
data-dismiss = "modal" From the button that should not close the dialog. After that, you can close the dialog by using $( "#TheDialogID" ).modal( "hide" ). Example:
<!--<SimpleModalBox>--> <div class="modal fade" id="SimpleModalBox" tabindex="-1" role="dialog" aria-labelledby="SimpleModalLabel" aria-hidden="true"> <!--<modal-dialog>--> <div class = "modal-dialog"> <!--<modal-content>--> <div class = "modal-content"> <div class = "modal-header"> <button type = "button" class = "close" data-dismiss = "modal"> <span aria-hidden="true">×</span> </button> <h4 class = "modal-title" id = "SimpleModalLabel">Title for a simple modal</h4> </div> <div id="TheBodyContent" class = "modal-body"> Put your content here </div> <div class = "modal-footer"> <button type = "button" class = "btn btn-default" data-dismiss = "modal">Yes</button> <button type = "button" class = "btn btn-default" onclick="doSomethingBeforeClosing()">Don't close</button> <button type = "button" class = "btn btn-default" data-dismiss = "modal">Cancel</button> </div> </div> <!--<modal-content>--> </div> <!--/modal-dialog>--> </div> <!--</SimpleModalBox>--> Javascript code:
//#region Dialogs function showSimpleDialog() { $( "#SimpleModalBox" ).modal(); } function doSomethingBeforeClosing() { //Do something. For example, display a result: $( "#TheBodyContent" ).text( "Operation completed successfully" ); //Close dialog in 3 seconds: setTimeout( function() { $( "#SimpleModalBox" ).modal( "hide" ) }, 3000 ); } //#endregion Dialogs look at => http://getbootstrap.com/2.3.2/javascript.html#modals
use
data-backdrop="static" or
$("#yourModal").modal({"backdrop": "static"}); Edit1 :
on your link opening your modal ==>
<a href="#" onclick="$('#yourModal').modal({'backdrop': 'static'});" class="btn btn-primary">yourModal</a> Edit2 :
http://jsfiddle.net/BVmUL/39/
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
