防止引导模式窗口在提交表单时关闭

Question

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

Answer 1

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">&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 2

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/

Answer 3

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

This is the button which triggers the modal. Here I have disabled 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 the modal div, with a form and a submit button. Replace ... with 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 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)
            }
        });
    })
}

Answer 4

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>

Answer 5

I ran into the similar problem where I use 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 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();
  }) 
});

Answer 6

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

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

Answer 7

use below code only:-

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

and write your html code in update panel then remove data-dismiss="modal" from the button. Hope it works for you.