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

Question

嗨，我第一次使用 Bootstrap，我无法让我的模态表单在单击提交按钮时保持打开状态。 我已经搜索过，但所有相关问题都处理略有不同的问题（下面的示例）。

禁止关闭 twitter 引导模式窗口

Answer 1

删除以下内容：

data-dismiss = "modal"

从不应关闭对话框的按钮。 之后，您可以使用 $( "#TheDialogID" ).modal( "hide" ) 关闭对话框。 例子：

<!--<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

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

利用

data-backdrop="static"

或者

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

编辑1：

在您打开模式的链接上==>

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

编辑2：

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

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

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

Answer 7

仅使用以下代码：-

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

并在更新面板中编写您的 html 代码，然后从按钮中删除 data-dismiss="modal" 。 希望对你有效。