jQuery 禁用对话框右上角的“X”按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2042691/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable 'X' button in top-right of Dialog
提问by BAHDev
Possible Duplicate:
Remove close button on jQueryUI Dialog?
可能的重复：
删除 jQueryUI 对话框上的关闭按钮？
I'm trying to make a dialog that requires a user to agree to terms before continuing, and don't want to allow the user to just click the 'X' in the top right corner of the dialog to close. I'd like to require that the user click 'I agree'.
我正在尝试制作一个对话框，要求用户在继续之前同意条款，并且不想让用户只需单击对话框右上角的“X”即可关闭。我想要求用户点击“我同意”。
Is there any way to disable the 'X' in the dialog?
有什么方法可以禁用对话框中的“X”？
Clarification:I'm just using the standard jQuery UI dialog: $.dialog().
说明：我只是使用标准的 jQuery UI 对话框：$.dialog()。
采纳答案by Chetan Sastry
I'm assuming you are using jQuery UI.
我假设您正在使用 jQuery UI。
If so, attach a beforeClose event handler and return false from it if the Agree button hasn't been clicked. You can also use CSS to set the X button to {display: none}
如果是这样，请附加一个 beforeClose 事件处理程序，如果未单击 Agree 按钮，则从它返回 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;
}
});
回答by foxvor
I found this on another post, hopes it helps, it worked for me:
我在另一篇文章中找到了这个，希望它有帮助，它对我有用：
$("#div2").dialog({
closeOnEscape: false,
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});
This is the link:
这是链接：
回答by SLaks
If your dialog is a regular popup window, it is not possible to prevent the user from closing the window.
如果您的对话框是常规弹出窗口，则无法阻止用户关闭该窗口。
You could use a jQuery modal dialog plugin, such as jqModal.
您可以使用 jQuery 模态对话框插件，例如jqModal。
Note, however, that you cannot prevent the user from closing the main window either.
但是请注意，您也无法阻止用户关闭主窗口。
EDIT: If you're using the jQuery UI dialog, you could add the following CSS rule:
编辑：如果您使用的是 jQuery UI 对话框，则可以添加以下 CSS 规则：
#someId .ui-dialog-titlebar-close {
display: none;
}
You shouldalso set the closeOnEscapeto false.
您还应该将 设置closeOnEscape为false。
Also, why are you forcingthe user to click I Agree?
Why can't you treat a closed window as if the you disagreed?
另外，你为什么要强迫用户点击I Agree？
为什么你不能把一个关闭的窗口当作你不同意？
回答by bprotas
As far as your task of disallowing the user to click the X, I would recommend one of a few approaches:
至于您禁止用户单击 X 的任务，我会推荐以下几种方法之一：
- use a CSS rule to set the display for that button to 'none'. Using Firebug's Inspect mode, you should be able to look at the tag that the jQuery UI dialog places there and add a CSS rule for it. If it's display is none, the user shouldn't be able to click it.
- Similarly, attach a jQuery .click() event that does nothing, and returns false to stop the event propagation (I have never actually done this one, but it should work).
- You could attach a function to the dialog's beforeClose() event that would allow you to prevent the dialog from closing if the user hadn't clicked "I Agree"
- Most complicated of all, but useful if you want to have similar dialogs or make other functional changes, you could subclass the jQuery UI dialog by creating a jQuery UI plugin that internally instantiates the dialog then modifies the default behavior by applying CSS rules or attaching events as described above.
- 使用 CSS 规则将该按钮的显示设置为“无”。使用 Firebug 的 Inspect 模式，您应该能够查看 jQuery UI 对话框放置在那里的标签并为其添加 CSS 规则。如果它的显示为无，则用户应该无法单击它。
- 同样，附加一个什么都不做的 jQuery .click() 事件，并返回 false 以停止事件传播（我从未真正做过这个，但它应该可以工作）。
- 您可以将一个函数附加到对话框的 beforeClose() 事件，如果用户没有单击“我同意”，您可以防止对话框关闭
- 最复杂的，但如果你想有类似的对话框或进行其他功能更改很有用，你可以通过创建一个内部实例化对话框的 jQuery UI 插件来子类化 jQuery UI 对话框，然后通过应用 CSS 规则或附加事件来修改默认行为如上所述。
Hope one of those gets you going in the right direction...
希望其中之一能让你朝着正确的方向前进......
回答by Jeff
Noticed that the div created for the dialog's titlebar has an aria-labelledby attribute that references your dialog (ui-dialog-title-{yourDialogName}), so I just hid the "x" with the following CSS:
注意到为对话框的标题栏创建的 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;
}I also set closeOnEscape to false to prevent that.
我还将 closeOnEscape 设置为 false 以防止发生这种情况。
回答by netefficacy
I add had a related issue: do a reload after user clicks the X to close in a specific dialog window, no reload in other windows. I added to jQuery dialog function in .js:
我添加了一个相关问题：在用户单击 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})
This looks for the title in the span text, and does reload upon close, otherwise close with no reload.
这会在 span 文本中查找标题，并在关闭时重新加载，否则关闭而不重新加载。
回答by Alexandre
Just a complement to Michael Meadows's answer. If you have multiple form and don't want to have the variable global, you can just add an attribute to the form DOM element. Something like :
只是对迈克尔梅多斯答案的补充。如果您有多个表单并且不想拥有全局变量，您可以只向表单 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');
}
}
);
I think you have to compare with 'true' and not only true since I think that attr are stored as string. but I am not sure about that....
我认为您必须与 'true' 进行比较，而不仅仅是 true，因为我认为 attr 存储为字符串。但我不确定这一点......
