logo标签列表

防止Bootstrap模态窗口在表单提交时关闭

javascriptcsstwitter-bootstrapmodal-dialog
25

大家好，我第一次使用Bootstrap，但是我无法让模态表单在点击提交按钮后保持打开状态。

我已经在Stack Overflow上搜索过了，但与此相关的所有问题都涉及略有不同的问题（例如下面的示例）。

禁止Twitter Bootstrap模态窗口关闭

1
你是通过ajax提交表单还是普通的提交表单？ - apostolov
@Apostolov，感谢您的快速回复！我没有使用ajax。Ajax不会将页面提交回来，因为我想在提交时进行回传，所以我认为不应该使用它。 - U r s u s
@apostolov 我也遇到了同样的问题，我正在使用Ajax，我该怎么办？ - hale
7个回答
18

请删除以下内容：

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
16
嗨@ZooL，感谢您的建议。我已经尝试了两种方法，奇怪的是JS可以工作，但标记却不行。然而，JS路线并不完全适用，因为模态窗口会在页面加载时显示，而不是在链接单击时显示。 - U r s u s
你有试过你的编辑吗？我注意到你删除了双引号，但我仍然认为它不起作用，因为href必须设置为模态窗口的id。 - U r s u s
@dura 你必须试一试。当你点击链接时，onclick事件会触发。 - ZooL
我已经在 @ZooL 的帮助下尝试过了。点击“提交”按钮后窗口仍然会关闭。我尝试将 onclick 事件添加到该按钮，但也不起作用。 - U r s u s
非常感谢您的所有努力。我已经在您的JFiddle上进行了测试，它可以正常工作。但是，如果我删除JS并添加Bootstrap示例的原始“role”和“data-toggle”，它也可以正常工作（即模态窗口在提交后不会关闭）。也许我们可以将此转移到聊天中。 - U r s u s
显示剩余4条评论
13

这是我的程序实现方式，希望它能有所帮助。

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

<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)
            }
        });
    })
}
5

如果您想添加多个数据并且希望模态框保持打开状态，请使用

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

如果您想在提交数据后关闭模态框，则必须使用

  • <button type="submit"></button>
3
我遇到了类似的问题，我使用模态框作为表单，因此我不能最初设置 data-backdrop="static" data-keyboard="false"，因为我希望用户只要在提交表单之前就可以关闭它。一旦他提交了表单，我希望阻止他关闭表单模态框。以下是我解决问题的方法。
$('#modalForm').on('submit', function() {
  $(#modal).on('hide.bs.modal', function ( e ) {
    e.preventDefault();
  }) 
});
1
使用此方法可防止Bootstrap模态窗口在表单提交时关闭。
$( "form" ).submit(function( event ) {
  event.preventDefault();
});
0

请仅使用以下代码：

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

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

如果您能在代码中加上一些解释，那将会非常好。如果您只编写指令，那么学习效果会大大降低。 - dv3
这是我想说的： 解释：<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> -<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <asp:Button ID="btnLogin" runat="server" Text="登录" CssClass="btn btn-primary form-control" /> </ContentTemplate> </asp:UpdatePanel> - inżynier umair
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接