web-dev-qa-db-ja.com

モーダルダイアログのオーバーレイでフェードイン

モーダルで背景が黒で不透明度が50％のJQueryUIダイアログがあります。背景の不透明度を0％から50％にフェードさせることは可能ですか？もしそうなら、どのように？現在、ダイアログが表示されたときに、パンチを顔にまっすぐに向けるような感じがするからです。

FWIW、これは私が現在使用しているCSSです。

.ui-widget-overlay {
    background: black;
    opacity: 0.5;
    filter: alpha(opacity = 50);
    position: absolute;
    top: 0;
    left: 0;
 }
jqueryjquery-uijquery-plugins
19
Deniz Dogan

JQuery fadeTo()関数を使用できます。詳細については、以下のリンクをご覧ください。 http://docs.jquery.com/Effects/fadeTo#speedopacitycallback

2
sshow

これをモーダルのfadeInに追加することもできます。

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

お役に立てれば ：）

37
Sam Barnes

これは、リアム・ポッターの答えを拡張したものです。彼はフェードインには最適ですが、フェードアウトを処理しません。これは、背景もフェードアウトさせる最も簡単な方法です。

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

JQueryはすでに「.ui-widget-overlay」コンテナを削除しているため、「close」メソッドでこれを行うことはできませんが、フェードを実行するためにクローンを作成することで、削除を回避し、デフォルトをすべて利用できます。スタイル。

7
Luke

これは古い質問だと思いますが、たった今検索で出くわし、他の人を助けることができると感じました。

これは改善される可能性がありますが、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();
    });
}
5
Liam Potter

リアム・ポッターの答えを少し改善しただけです。オーバーレイを全画面表示にしたい場合は、本体の代わりに$(document).height()と$(document).width()を使用するようにコードを変更できます。後者は、表示領域よりも小さいためです。

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();
    });
}
1
pody

$ .ui.dialogを拡張する独自のウィジェットを作成して、オプションを使用して正確な構成でオーバーレイの表示と非表示のアニメーションを追加できます。

オーバーレイをクリックしてダイアログを閉じるためのもう1つの欠けている機能も簡単に追加できます。

一部のファイルでは、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

1
bmurashin

それを機能させるためにSamBarnesからの回答を変更する必要がありました（$（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();
  }
});
0
Moe Singh
$('.ui-widget-overlay').hide().fadeIn();

フェードイン後に不透明度が機能しないため、この効果はIE

0
wildwindfeng