在modal dialog中淡入叠加
我有一个JQuery UI对话框，它是模态的，具有50％不透明度的黑色背景。 是否可以使背景不透明度从0％淡化到50％？ 如果是这样，怎么样？ 因为目前感觉有点像在显示对话框时直接冲到脸上。
FWIW，这是我目前正在使用的CSS：
.ui-widget-overlay { background: black; opacity: 0.5; filter: alpha(opacity = 50); position: absolute; top: 0; left: 0; } 您可以使用jQuery fadeTo()函数。 更多信息可以在下面的链接中找到。 http://docs.jquery.com/Effects/fadeTo#speedopacitycallback
您还可以将此添加到fadeIn模态中：
$(loginForm).dialog({ resizable: false, open: function(){ $('.ui-widget-overlay').hide().fadeIn(); }, show: "fade", hide: "fade" });
希望这可以帮助 ：）
这是Liam Potter答案的扩展。 他的作品很适合淡入淡出，但不会淡出淡出。 我发现这是使背景也消失的最简单方法：
beforeClose: function(){ $('.ui-widget-overlay:first') .clone() .appendTo('body') .show() .fadeOut(400, function(){ $(this).remove(); }) ; }
你不能在“关闭”方法中执行此操作，因为jQuery已经删除了’.ui-widget-overlay’容器，但是通过克隆它只是做淡化你可以回避它们的删除并仍然使用所有默认值样式。
我知道这是一个古老的问题，但我刚刚在搜索中遇到它，觉得我可以帮助其他人。
这可以改进我确定，但是当使用jQuery UI对话框时，这将淡入和淡出您的叠加层。
open: function(){ $('.ui-widget-overlay').hide().fadeIn(); }, beforeClose: function(){ $('.ui-widget-overlay').remove(); $("", { 'class':'ui-widget-overlay' }).css( { height: $("body").outerHeight(), width: $("body").outerWidth(), zIndex: 1001 } ).appendTo("body").fadeOut(function(){ $(this).remove(); }); }
对Liam Potter的回答只是一个小小的改进。 如果你想要覆盖全屏，那么你可能会改变他的代码使用$(document).height()和$(document).width()而不是body，因为后者的测量小于可见区域。
open: function(){ $('.ui-widget-overlay').hide().fadeIn(); }, beforeClose: function(){ $('.ui-widget-overlay').remove(); $("", { 'class':'ui-widget-overlay' }).css({ height: $(document).height(), width: $(document).width(), zIndex: 1001 }).appendTo("body").fadeOut(function(){ $(this).remove(); }); }
您可以使用选项创建自己的小部件，扩展$ .ui.dialog以添加叠加显示并使用精确配置隐藏动画。
另一个缺少通过点击叠加来关闭对话框的function也很容易添加：
在一些文件中，比如说jquery-ui.fsrc.dialog.js：
(function( $, undefined ) { $.widget('fsrc.fsrc_dialog', $.ui.dialog, { open: function() { // some helpful vars var self = this, options = self.options; // call parent method - it will create overlay and save it in self.overlay variable var ret = $.ui.dialog.prototype.open.apply(this, arguments); if (options.showOverlay) { // immediately hide and animate overlay // kind a hack, but jquery ui developers left no better way self.overlay.$el.hide().show(options.showOverlay) } if (options.closeOnOverlay) { // close dialog on click on overlay self.overlay.$el.click(function() { self.close(); }) } return ret; }, close: function(event) { var self = this, options = self.options; if (options.hideOverlay) { // save and unset self.overlay, so it will not be destroyed by parent function during animation var overlay = self.overlay self.overlay = null; overlay.$el.hide(options.hideOverlay, function() { // destroy overlay after animation as parent would do overlay.destroy(); }) } // call parent method var ret = $.ui.dialog.prototype.close.apply(this, arguments); return ret; } }); }(jQuery));
在页面中：
`
我命名命名空间，小部件和选项对我有利。
经过测试的jquery1.7.2，jquery-ui1.8.19，IE9，ff11，chrome18.0.1025.168m，opera11.61
$('.ui-widget-overlay').hide().fadeIn();
此效果在IE上有问题，因为淡入后不透明度不起作用
我不得不修改Sam Barnes的答案以使其工作（我还在$（document）.ready函数中抛出了对话框单击函数）：
Some Message!
您可以通过添加以下内容添加隐藏在退出按钮按下的内容：
$(document).keyup(function(e) { if (e.keyCode == 27) { $(".ui-dialog").hide(); $('.ui-widget-overlay').hide(); } });