Question

您好我第一次使用Bootstrap而且我无法通过单击提交按钮让我的模态表单保持打开状态。我搜索了SO，但所有相关问题都涉及略有不同的问题（例如下面的例子）。

Disallow twitter bootstrap modal window from closing

Answer 1

删除以下内容：

data-dismiss = "modal"

从不应关闭对话框的按钮。之后，您可以使用$（＆＃34;＃TheDialogID＆＃34;）.modal（＆＃34; hide＆＃34;）关闭对话框。例如：

<!--<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代码：

//#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

看看=＆gt; http://getbootstrap.com/2.3.2/javascript.html#modals

使用

data-backdrop="static"

或

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

Edit1：

在你的链接上打开你的模态==＆gt;

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

Edit2：

http://jsfiddle.net/BVmUL/39/

Answer 3

这就是我在我的计划中所做的，希望它有所帮助。

这是触发模态的按钮。在这里，我禁用了模态外的键盘和鼠标点击。

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

这是模态div，带有表单和提交按钮。将...替换为您的模态内容。

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

最后点击提交按钮时触发的功能。此处event.preventDefault();将阻止表单提交的默认操作，以便模式保留。

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

Answer 4

如果您想添加多个数据，并且希望模态保持开放状态

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

如果要在提交数据后关闭模式，则必须使用

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

Answer 5

我遇到了类似的问题，我使用modal作为表单，所以我不能初始设置data-backdrop="static" data-keyboard="false"，因为我希望用户能够关闭它，只要他没有提交表单。一旦他提交了表单，我想阻止他关闭表单模式。以下是我的解决方法。

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

Answer 6

仅使用以下代码： -

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

}）;

并在更新面板中编写html代码，然后删除data-dismiss =＆＃34; modal＆＃34;从按钮。希望它适合你。

Answer 7

使用它来防止引导程序模式窗口在表单提交时关闭

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

防止bootstrap模式窗口关闭表单提交

7 个答案: