Prevent closing bootstrap modal window when submitting form

Question

Hi, I am using Bootstrap for the first time, and I cannot force my modal form to remain open when the submit button is clicked. I searched for SO, but all questions related to it concern a little different problems (example below).

Prevent closing twitter bootstrap modal window

Answer 1

look = = http://getbootstrap.com/2.3.2/javascript.html#modals

using

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/

Answer 2

Delete the following:

 data-dismiss = "modal" 

From a button that should not close the dialog. After that, you can close the dialog 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">&times;</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 

Answer 3

Here is how I did it in my program, hope this helps.

This is the button that launches the modal. Here I turned off the keyboard and mouse click outside the modal.

 <button type="button" data-toggle="modal" data-target="#modalDivId" data-backdrop="static" data-keyboard="false"> 

This is a modal div, with a form and a submit button. Replace ... your modal content.

 <div class="modal fade" id="modalDivId" role="dialog"> <form> ... <button type="submit" onClick="myFunction()" class="btn btn-success"> Submit </button> </form> </div> 

Finally, a function that starts when you click the submit button. Here event.preventDefault(); will prevent the default action for the submit form, so the modal value will remain.

 function myFunction() { $("form").on("submit", function (event) { event.preventDefault(); $.ajax({ url: "yoururl", type: "POST", data: yourData, success: function (result) { console.log(result) } }); }) } 

Answer 4

If you want to add some data and you want the modal to remain open, use

• <button type="button"></button>

and if you want to close the modal after sending the data, you should use

• <button type="submit"></button>

Answer 5

use only code: -

 enter $(document).ready(function () { $("#myModal").modal('show'); 

});

and write your html code in the update panel, and then delete the dismissal = "modal" data from the button. Hope this works for you.

Answer 6

Use this to prevent the modal boot window from closing when submitting the form.

 $( "form" ).submit(function( event ) { event.preventDefault(); }); 

Answer 7

I encountered a similar problem when I use the modal as a form, so I cannot initially set data-backdrop="static" data-keyboard="false" because I want the user to be able to close it before he submits the form . As soon as he submits the form, I want him not to close the modal form. Here is how I can get around.

 $('#modalForm').on('submit', function() { $(#modal).on('hide.bs.modal', function ( e ) { e.preventDefault(); }) });