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

StackOverflow https://stackoverflow.com/questions/2042691

题

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

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

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

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

有帮助吗？

解决方案

我假设你正在使用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;
    }
});

其他提示

我发现这在另一个帖子，希望有帮助，它为我工作：

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

这是链接：

如何在jQuery用户界面对话框中删除关闭按钮？

如果你的对话框是一个普通的弹出窗口，这是不可能的，以防止用户关闭窗口。

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

请注意，但是，不能防止用户要么关闭主窗口。

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

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

您shouldalso设置closeOnEscape到false。

此外，为什么你的强制用户点击I Agree？点击 为什么你不能把一个封闭的窗口，如果你不同意？

至于禁止用户单击 X 的任务，我建议采用以下几种方法之一：

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

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

注意到，在该对话框的标题栏创建的div有一首咏叹调，labelledby属性引用您的对话框（UI-对话框的标题 - {yourDialogName}），所以我就躲到了“X”用下面的CSS：

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

我还设置closeOnEscape为false以防止

我添加了一个相关的问题：做一个重载用户点击X关闭在一个特定的对话窗口，在其他窗口没有重装后。我加入到jQuery的对话功能的.js：

.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})

这会在跨度文本标题，并在接近并重新加载，否则关闭没有重新加载。

只是一个补充，迈克尔·梅多斯的回答。如果你有多个表单，不希望有全局变量，你可以只添加属性到窗体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属性存储为字符串“真”，而不是唯一真正的比较。但我不知道这一点......

如果您正在使用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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top