Question

可能重复：
Remove close button on jQueryUI Dialog?

我正在尝试创建一个对话框，要求用户在继续之前同意条款，并且不希望用户只需单击对话框右上角的“X”即可关闭。我想要求用户点击“我同意”。

有没有办法在对话框中禁用'X'？

澄清：我只是使用标准的jQuery UI对话框：$ .dialog（）。

Answer 1

我在另一篇文章中发现了这个，希望它有所帮助，它对我有用：

$("#div2").dialog({
   closeOnEscape: false,
   open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});

这是链接：

How to remove close button on the jQuery UI dialog?

Answer 2

我假设您正在使用jQuery UI。

如果是，请附加beforeClose事件处理程序，如果尚未单击“同意”按钮，则从中返回false。您还可以使用CSS将X按钮设置为{display: none}

var agreed = false; //has to be global
$("something").dialog({
    buttons: {
        'Apply': function () {
            agreed = true;
            $(this).dialog("close");
        }
    },
    beforeClose: function () {
        return agreed;
    }
});

Answer 3

如果您的对话框是常规弹出窗口，则无法阻止用户关闭窗口。

您可以使用jQuery模式对话框插件，例如jqModal。

但请注意，您无法阻止用户关闭主窗口。

编辑：如果您正在使用jQuery UI对话框，则可以添加以下CSS规则：

#someId .ui-dialog-titlebar-close {
    display: none;
}

您还应该将closeOnEscape设置为false。

另外，为什么强制用户点击I Agree？
为什么你不能像对待不同意那样对待关闭的窗口？

Answer 4

至于您不允许用户点击X的任务，我建议采用以下几种方法之一：

使用CSS规则将该按钮的显示设置为“none”。使用Firebug的Inspect模式，您应该能够查看jQuery UI对话框所在的标记，并为其添加CSS规则。如果显示为none，则用户无法单击它。
同样，附加一个什么都不做的jQuery .click（）事件，并返回false来停止事件传播（我从来没有真正完成过这个事件，但它应该可以工作）。
您可以在对话框的beforeClose（）事件中附加一个函数，以便在用户未单击“我同意”时阻止对话框关闭
最复杂的，但如果您想要有类似的对话框或进行其他功能更改，则有用，您可以通过创建一个jQuery UI插件来子类化jQuery UI对话框，该插件在内部实例化对话框，然后通过应用CSS规则修改默认行为或如上所述附加事件。

希望其中一个让你朝着正确的方向前进......

Answer 5

注意到为对话框的标题栏创建的div有一个引用你的对话框的uria-labelledby属性（ui-dialog-title- {yourDialogName}），所以我只是用以下CSS隐藏了“x”：

div.ui-dialog[aria-labelledby="ui-dialog-title-myDialog"] a.ui-dialog-titlebar-close {
    display: none;
}

我还将closeOnEscape设置为false以防止这种情况。

Answer 6

我添加了一个相关问题：在用户单击X以在特定对话框窗口中关闭后执行重新加载，不在其他窗口中重新加载。我在.js中添加了jQuery对话框函数：

.click(function(i){ jQuery('span.ui-dialog-title').each(function(index) {


    if (jQuery(this).text() == '/**Title String Here**/') {

        a.close(i); location.reload(true); 

    } else {

        a.close(i);
    }

  });
return false})

这将在范围文本中查找标题，并在关闭时重新加载，否则关闭而不重新加载。

Answer 7

只是对Michael Meadows答案的补充。如果您有多个表单并且不希望将变量设置为global，则只需向表单DOM元素添加一个属性即可。类似的东西：

$('#yourForm').dialog(
 open : function(){
   $('#yourForm').attr('agreed', false);
 },
 beforeClose : function(){
   return $('#yourForm').attr('agreed') == 'true';
 },
 buttons:{'OK':function(){
        $('#yourForm').attr('agreed', true);        
        $(this).dialog('close');
    },
    'Cancel' : function(){
        $('#yourForm').attr('agreed', false);
        $(this).dialog('close');
    }
 }
);

我认为你必须与'true'进行比较而不仅仅是因为我认为attr存储为字符串。但我不确定......

Answer 8

如果您使用alert，或许您应该考虑使用confirm：

if (!confirm("Click OK to confirm that you agree to the terms and conditions.")) {
    // they didn't click OK
} else {
    // they did.
}

或者，像提到的SLaks一样使用a plugin

禁用Dialog右上角的“X”按钮

8 个答案: