prevent bootstrap modal window from closing on form submission

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

7 Answers

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 tabindex="-1" 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 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 =>

use

data-backdrop="static" 

or

$("#yourModal").modal({"backdrop": "static"}); 

Edit1 :

on your link opening your modal ==>

<a href="#" onclick="$('#yourModal').modal({'backdrop': 'static'});">yourModal</a> 

Edit2 :

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

This is the button which triggers the modal. Here I have disable the keyboard and mouse click outside the modal.

<button type="button"> 

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

<div> <form> ... <button type="submit" onClick="myFunction()"> Submit </button> </form> </div> 

Finally the function which triggers when you click submit button. Here event.preventDefault(); will prevent the default action of form submit, so that the modal will remain.

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

If you want to add multiple data and you want modal to stay open use

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

and If you want to close the modal after submitting data you must use

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

I ran into the similar problem where I use modal as a form so I cannot initially set data-backdrop="static" because I want the user to be able to close it as long as he has not submitted the form. Once he has submitted the form, I want to prevent him from closing the form modal. Here is how I can get around.

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

Use this to prevent bootstrap modal window from closing on form submission

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

use below code only:-

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

and write your html code in update panel then remove from the button. Hope it works for you.