41

可能重复：
删除 jQueryUI 对话框上的关闭按钮？

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

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

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

4

8 回答 8

60

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

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

这是链接：

如何删除 jQuery UI 对话框上的关闭按钮？

于 2011-10-27T18:54:56.933 回答
41

我假设您正在使用 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;
    }
});
于 2010-01-11T15:34:12.817 回答
13

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

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

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

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

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

您还应该将 设置closeOnEscape为false。

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

于 2010-01-11T15:22:06.087 回答
3

至于您不允许用户单击 X 的任务，我会推荐以下几种方法之一：

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

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

于 2010-01-11T15:32:52.773 回答
3

注意到为对话框的标题栏创建的 div 有一个引用您的对话框的 aria-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 以防止这种情况。

于 2010-09-19T05:23:24.917 回答
3

我添加了一个相关问题：在用户单击 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 文本中查找标题，并在关闭时重新加载，否则在不重新加载的情况下关闭。

于 2011-01-31T17:14:41.567 回答
3

只是对迈克尔梅多斯答案的补充。如果您有多个表单并且不想使用全局变量，您可以向表单 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');
    }
 }
);

我认为您必须与“真”进行比较，而不仅仅是真的，因为我认为 attr 存储为字符串。但我不确定....

于 2011-04-14T19:11:27.367 回答
1

如果您正在使用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 之类的插件

于 2010-01-11T15:24:29.313 回答