为什么我的 Jquery Modals 会通过我的模态框上的任何按钮关闭？答案

【问题标题】：Why does my Jquery Modals close with any button on my modal?为什么我的 Jquery Modals 会通过我的模态框上的任何按钮关闭？
【发布时间】：2025-12-21 10:00:11
【问题描述】：

我的 Jquery 模态运行完美但是，当我单击一个不应该关闭模态的按钮时，它会关闭模态？难道是按钮自动刷新页面导致模式关闭？我该如何克服当前的问题？

这是脚本：

 <script>

$(document).ready(function () {
    var triggers = $(".modalInput").overlay({

        // some mask tweaks suitable for modal dialogs
        mask: {
            color: '#F7F7F7',
            loadSpeed: 200,
            opacity: 0.9
        },

        closeOnClick: false
    });

    var buttons = $("#yesno button").click(function (e) {

        // get user input
        var yes = buttons.index(this) === 0;

        // do something with the answer
        triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
    });

});

 </script>

这是按钮（触发器）：

    <asp:Button class="modalInput" rel="#yesno" ID="modalInput" runat="server" BackColor="#525663" BorderColor="#999999"
               BorderStyle="Solid" BorderWidth="1pt" CommandName="MoveNext" Font-Size="Large"
               ForeColor="White" Style="font-family: Segoe UI; margin-left: 0px; position: relative;
               top: 25px; left: -25px; width: 152px; height: 41px;" Text="Edit Information"  />

这是模态：

  <div class="modal" id="yesno">  
 <h2>Edit Account Information:</h2>  

   <Uc2:EditCurrentSet ID="EditCurrentSet" runat="server" />

    <a class="close"></a> 

        </p></div>

*我是否将返回值设为 false；在正确的地方？：如果我在，结果仍然没有变化！ *

   <script>


$(document).ready(function () {
    var triggers = $(".modalInput").overlay({

        // some mask tweaks suitable for modal dialogs
        mask: {
            color: '#F7F7F7',
            loadSpeed: 200,
            opacity: 0.9
        },

        closeOnClick: false

    });

    var buttons = $("#yesno button").click(function (e) {

        // get user input
        var yes = buttons.index(this) === 0;

        // do something with the answer
        triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
        return false;
    });

    return false;
});
  </script>

【问题讨论】：

需要代码或 jsfiddle 示例来给你任何反馈。
好的，我已经发布了代码！
@FBEvo1 return false 在点击事件处理函数的末尾
请检查我是否在代码中添加了更多详细信息！！！
@FBEvo1 现在可以工作了吗？我没想到选择器会找到你想要的按钮......

标签： javascript jquery asp.net button modal-dialog

【解决方案1】：

是的，您的return false; 放错地方了。使用事件的preventDefault 函数代替return false;：

var buttons = $("#yesno button").click(function (e) {
    e.preventDefault();

    // get user input
    var yes = buttons.index(this) === 0;

    // do something with the answer
    triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
    return false;
});

该按钮按照网络表单的性质提交。使用preventDefault（或return false;，如果需要）将阻止它发布到服务器，这是asp:Button 的默认操作。

【讨论】：

【解决方案2】：

如果您已将事件处理程序更改为返回 false，但它仍然无法正常工作，那么您没有选择正确的按钮。我认为你的选择器应该是这样的：

var buttons = $("#modalInput").click(function (e) {
    // get user input
    var yes = buttons.index(this) === 0;

    // do something with the answer
    triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
    return false;
});

选择器中的 # 表示您正在尝试按 ID 查找按钮 - 您可以查看该按钮的呈现 HTML（在您喜欢的浏览器中查看源代码/Web 开发人员工具）并自己检查 ID。通过向按钮添加一个 rel 属性，您稍微复杂了一点，但我不认为选择器会起作用。

【讨论】：