如何阻止我的模态对话框在按钮单击时关闭？

Posted 2023-02-22

【中文标题】如何阻止我的模态对话框在按钮单击时关闭？

【英文标题】：How can I stop my modal dialog from closing on button click?

【发布时间】：2015-01-17 02:53:10

【问题描述】：

我在引导模式对话框中有这个按钮：

<button id="btnSelectAll" style="float:left">Select All</button>

点击事件看起来像这样，它应该做的只是将一堆复选框标记为选中。

$(document).on('click', '#btnSelectAll', function ()

    var $modal = $('#MyPanel');
    $modal.find('#aCheckBox').prop('checked', true);

);

这是模态本身的标记（删除了细节，因为它有点长，基本上只是一堆最后带有几个按钮的复选框）：

   <asp:Panel class="modal" ID="MyPanel" runat="server">
        <div class="modal-dialog modal-lg" style="width:30%">
            <div class="modal-content">
                <div class="modal-header">
                    <asp:Label ID="Header" runat="server" Text="Header" />
                </div>
                <div class="modal-body">
                    <table>
                        <tr>
                            <td style="width: 20px;" />
                            <td>
                                <asp:Label ID="Label" runat="server" Text="Stuff:" />
                            </td>
                           <tr>
                    </table>
               </div>
          </div>
     </div>
</asp:Panel>

我在调试器中看到点击事件代码被点击，但是当我点击按钮时，模式对话框总是立即关闭。我似乎无法在网上找到任何解释原因的东西，谷歌搜索只是给了我一堆“如何在按钮单击时关闭模式”类型的问题。我想知道如何不关闭它。

【问题讨论】：

您能否也为您的模态提供标记？任何相关的 JS 也会很有用。

您是否尝试过使用 e.preventDefault(); ?

在模态体中使用按钮和复选框制作了一个快速模态，单击该按钮并选中所有框。不关闭。 jsfiddle.net/wmbs3znt

所以这应该检查一堆复选框？请告诉我，您没有为一堆页面元素提供相同的 ID，因为 $modal.find('#aCheckBox').prop('checked', true); 不应该是您找到多个项目对它们做某事的方式......

@MattD 谢谢，我不得不使用 preventDefault 不知道为什么，因为我的代码的其他所有内容都与您的代码匹配（现在......我没想到一次检查所有复选框并且非常长长的名单哈哈）所以感谢你让我的代码更干净：D

【参考方案1】：

你可以试试e.preventDefault。从jQuery documentation 我们有这个

说明：如果调用此方法，事件的默认动作 不会被触发。

因此，如果您将代码更改为以下内容：

$(document).on('click', '#btnSelectAll', function (event)

    event.preventDefault();
    var $modal = $('#MyPanel');
    $modal.find('#aCheckBox').prop('checked', true);
);

您的问题将得到解决。