禁用对话框右上角的“X”按钮[重复]答案

【问题标题】：Disable 'X' button in top-right of Dialog [duplicate]禁用对话框右上角的“X”按钮[重复]
【发布时间】：2011-01-03 19:15:32
【问题描述】：

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

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

有什么方法可以禁用对话框中的“X”？

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

【问题讨论】：

如果用户禁用了 Javascript，他们将永远看不到它，我建议您使用带有 Post Form 的 HTML 页面。
哪个标准的 jQuery 对话框？
@Michale B. 谁再禁用 js？我认为我们生活在一个可以安全地说“嗨，你没有打开 js，我们的网站不适合你！”的世界中！

标签： jquery jquery-ui dialog jquery-ui-dialog

【解决方案1】：

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

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

这是链接：

How to remove close button on the jQuery UI dialog?

【讨论】：

太棒了，非常感谢..

【解决方案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;
    }
});

【讨论】：

在 'Apply' 和 function() 之间应该有一个分号来代替逗号。

【解决方案3】：

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

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

但是请注意，您也不能阻止用户关闭主窗口。

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

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

您还应该将closeOnEscape 设置为false。

另外，你为什么强迫用户点击I Agree？
为什么不能将关闭的窗口视为您不同意？

【讨论】：

【解决方案4】：

就您禁止用户点击 X 的任务而言，我会推荐以下几种方法之一：

使用 CSS 规则将该按钮的显示设置为“无”。使用 Firebug 的检查模式，您应该能够查看 jQuery UI 对话框放置在那里的标签并为其添加 CSS 规则。如果它的显示为无，则用户应该无法点击它。
同样，附加一个不执行任何操作的 jQuery .click() 事件，并返回 false 以停止事件传播（我实际上从未做过这个，但它应该可以工作）。
您可以将一个函数附加到对话框的 beforeClose() 事件中，如果用户没有单击“我同意”，您可以防止对话框关闭
最复杂的，但如果你想有类似的对话框或进行其他功能更改很有用，你可以通过创建一个内部实例化对话框的 jQuery UI 插件来子类化 jQuery UI 对话框，然后通过应用 CSS 规则修改默认行为或附加如上所述的事件。

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

【讨论】：

【解决方案5】：

注意到为对话框的标题栏创建的 div 具有引用您的对话框 (ui-dialog-title-{yourDialogName}) 的 aria-labelledby 属性，因此我只是使用以下 CSS 隐藏了“x”：

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

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

【讨论】：

【解决方案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})

这会在 span 文本中查找标题，并在关闭时重新加载，否则在不重新加载的情况下关闭。

【讨论】：

【解决方案7】：

只是对 Michael Meadows 答案的补充。如果您有多个表单并且不想使用全局变量，您可以向表单 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”进行比较，而不仅仅是 true，因为我认为 attr 存储为字符串。但我不确定....

【讨论】：

【解决方案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.
}

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

【讨论】：