jQuery 阻止背景内容并专注于模态对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11198086/
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
Blocking background content and focus on modal dialog
提问by methuselah
I am trying to block the background with my two jquery modal dialogs until the user closes the window. Any idea on how to achieve this?
我试图用我的两个 jquery 模式对话框来阻止背景，直到用户关闭窗口。关于如何实现这一目标的任何想法？
By "blocking the background" I mean disabling the other elements on the page (i.e. making other elements unclickable).
“阻止背景”是指禁用页面上的其他元素（即使其他元素不可点击）。
Here is my code below:
这是我的代码如下：
// sign up dialog
$( "#aboutus_dialog" ).dialog({
autoOpen: false,
show: "fadein",
hide: "fadeout"
});
// sign up dialog
$( "#signup_dialog" ).dialog({
autoOpen: false,
show: "fadein",
hide: "fadeout"
});
// about us modal
$('#aboutus').click(function() {
modal: true,
$("#aboutus_dialog").dialog("open");
return false;
});
// about us modal
$('#signup').click(function() {
$("#signup_dialog").dialog("open");
return false;
});
});
采纳答案by ant
Is this what you're looking for
这是你要找的吗
http://jqueryui.com/demos/dialog/#modal
http://jqueryui.com/demos/dialog/#modal
It does block the background you have the view source button. Do you have any overlay at all?
它确实阻止了您拥有查看源代码按钮的背景。你有任何叠加吗？
Try setting it manually(not recommended but rather trough css) :
尝试手动设置（不推荐，而是通过 css）：
$(".ui-widget-overlay").attr('style','background-color: #000; opacity:1; z-index:1000;');
And of course setting the modal option to true.
当然，将模态选项设置为 true。
If the color is too strong decrease the opacity accordingly.
如果颜色太浓，则相应地降低不透明度。
回答by Greeshma
when i changed modal value to 'true' (in angular js) all background elements got disabled.here is my code attached:
当我将模态值更改为“true”（在 angular js 中）时，所有背景元素都被禁用。这是我附加的代码：
var options = {
autoOpen : false,
modal : true,
close : function(event, ui) {
console.log("Predefined close");
}
};
dialogService.open("myDialog" + k, "dialogTemplateload.html", model, options)
.then(
function(result) {
console.log("Close");
console.log(result);
},
function(error) {
console.log("Cancelled");
}
);
回答by charlietfl
Look through the dialog options in the API, there are quite a few. In addition to modalwhich sets an overlay over page that blocks mouse events, there is also closeOnEscapewhich if set to falsedoesn't allow user to hit escape key on keyboard to close dialog and therefore has to interact with dialog controls directly
查看API中的对话框选项，有不少。除了modal设置阻止鼠标事件的页面覆盖之外，还有closeOnEscape如果设置为false不允许用户按键盘上的转义键关闭对话框，因此必须直接与对话框控件交互
There is a significant API tucked into the tabs on demo page http://jqueryui.com/demos/dialog/
在演示页面http://jqueryui.com/demos/dialog/的选项卡中隐藏了一个重要的 API
回答by luziio
Try creating your own theme using Jquery's theme roller. It also helps in the functionality of the modal and other widgets within Jquery's UI library
尝试使用 Jquery 的主题滚轮创建您自己的主题。它还有助于 Jquery 的 UI 库中的模态和其他小部件的功能
