19

我有一个 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;
 }
4

8 回答 8

38

您还可以将其添加到 fadeIn 模态中：

$(loginForm).dialog({
        resizable: false,
        open: function(){
            $('.ui-widget-overlay').hide().fadeIn();
        },
        show: "fade",
        hide: "fade" 
});

希望这可以帮助 ：）

于 2010-09-22T08:58:49.663 回答
8

这是对利亚姆波特答案的扩展。他的作品非常适合淡入，但不处理淡出。我发现这是使背景也淡出的最简单方法：

beforeClose: function(){
    $('.ui-widget-overlay:first')
        .clone()
        .appendTo('body')
        .show()
        .fadeOut(400, function(){ 
            $(this).remove(); 
        })
    ;
}

您不能在“关闭”方法中执行此操作，因为 jQuery 已经删除了 '.ui-widget-overlay' 容器，但是通过将其克隆为仅进行淡入淡出，您可以避开它们的删除并仍然使用所有默认值样式。

于 2012-10-11T21:38:22.647 回答
5

我知道这是一个老问题，但是我刚刚在搜索中遇到了它，并且觉得我可以帮助其他人。

我敢肯定这可以改进，但是当使用 jQuery UI 对话框时，这会淡入淡出你的叠加层。

open: function(){
    $('.ui-widget-overlay').hide().fadeIn();
},
beforeClose: function(){
    $('.ui-widget-overlay').remove();
    $("<div />", {
        'class':'ui-widget-overlay'
    }).css(
        {
            height: $("body").outerHeight(),
            width: $("body").outerWidth(),
            zIndex: 1001
        }
    ).appendTo("body").fadeOut(function(){
        $(this).remove();
    });
}
于 2011-09-15T16:08:08.107 回答
2

您可以使用 jQueryfadeTo()函数。更多信息可以在下面的链接中找到。 http://docs.jquery.com/Effects/fadeTo#speedopacitycallback

于 2009-04-15T14:03:05.803 回答
1

对利亚姆·波特的回答只是一个小小的改进。如果您希望覆盖是全屏的，那么您可以将他的代码更改为使用$(document).height()and$(document).width()而不是 body，因为后者的测量值小于可见区域。

open: function(){
    $('.ui-widget-overlay').hide().fadeIn();
},
beforeClose: function(){
    $('.ui-widget-overlay').remove();
    $("<div />", {
        'class':'ui-widget-overlay'
    }).css({
        height: $(document).height(),
        width: $(document).width(),
        zIndex: 1001
    }).appendTo("body").fadeOut(function(){
        $(this).remove();
    });
}
于 2012-01-18T09:52:53.777 回答
1

您可以创建自己的小部件扩展 $.ui.dialog 以使用选项添加具有准确配置的覆盖显示和隐藏动画。

另一个缺少通过单击覆盖关闭对话框的功能也很容易添加：

在某个文件中，比如 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));

在页面中：

<script src='/js/jquery-ui.fsrc.dialog.js' type='text/javascript'></script>
<script type="text/javascript">
<!--
    jQuery(document).ready(function(){
        jQuery('#show').click(function(){
            jQuery('#order_form_container').fsrc_dialog({
                modal: true,
                closeOnOverlay: true,
                show: {effect: "fade", duration: 500},
                showOverlay: {effect: "fade", duration: 500},
                hide: {effect: "fade", duration: 300},
                hideOverlay: {effect: "fade", duration: 300},
            });
        })
    })
-->
</script>`

我将命名空间、小部件和选项命名为对我有利的名称。

测试过jquery1.7.2、jquery-ui1.8.19、IE9、ff11、chrome18.0.1025.168m、opera11.61

于 2012-05-01T16:56:16.167 回答
0 
$('.ui-widget-overlay').hide().fadeIn();

此效果在 IE 上存在问题，因为在淡入后不透明度将不起作用

于 2010-11-14T14:27:43.933 回答
0

我不得不修改 Sam Barnes 的答案以使其工作（我还在 $(document).ready 函数中抛出了对话框单击函数）：

<script type='text/javascript'>
  $(".dialog").click(function(){
    $('.ui-widget-overlay').hide().fadeIn();        
    $("div.dialog").dialog({
        resizable: false,
        close: function(){
            $('.ui-widget-overlay').hide();
        },
        show: "fade",
        hide: "fade" 
    });
    $(".ui-dialog").fadeIn();
    return false;
  });
  $(".ui-widget-overlay").click(function(){
    $(this).hide();
    $(".ui-dialog").hide();
  });
</script>
<style>
  .ui-widget-overlay {
    background: black;
    opacity: 0.5;
    filter: alpha(opacity = 50);
    position: absolute;
    top: 0;
    left: 0;
   }
</style>
<div class='ui-widget-overlay'></div>
<div class='dialog' title='Heading!'>Some Message!</div>

您可以通过添加以下内容来添加隐藏在退出按钮按下的内容：

$(document).keyup(function(e) {

  if (e.keyCode == 27) { 
       $(".ui-dialog").hide();
       $('.ui-widget-overlay').hide();
  }
});
于 2014-07-08T15:26:54.350 回答