19


4

モーダルで、50%の不透明度を持つ黒い背景を持つJQuery UIダイアログがあります。 背景の不透明度を0%から50%にフェードインさせることはできますか? もしそうなら、どうですか? 現在のところ、ダイアログが表示されているときにパンチを直視するような感じがするからです。

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

.ui-widget-overlay {
背景:黒。不透明度:0.5。フィルタ:アルファ(不透明度= 50)。位置:絶対トップ:0。左:0; }

8 Answer


37


これを追加して、モーダルをfadeInすることもできます。

$(loginForm).dialog({サイズ変更:false、開く:function(){$( '。ui-widget-overlay')。hide()。fadeIn();}、show: "fade"、hide: "fade "});

お役に立てれば :)


7


これはリアムポッターの答えを拡大したものです。 彼の作品はフェードインには最適ですが、フェードアウトには対応していません。 私はこれが背景を消す最も簡単な方法であることもわかりました:

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

jQueryはすでに '.ui-widget-overlay’コンテナを削除しているため、これを "close"メソッドで行うことはできません。スタイル


5


これは昔からの質問ですが、今検索中に出くわしたので、他の人を助けることができると思います。

これは改善されるかもしれませんが、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();}); }


2


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


1


Liam Potterの答えが少し改善されました。 オーバーレイをフルスクリーンにしたい場合は、本文の代わりに `+ $(document).height()`と ` $(document).width()+`を使用するように彼のコードを変更するかもしれません。後者は、可視領域よりも小さく測定する必要があります。

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


1


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

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

いくつかのファイルでは、jquery-ui.fsrc.dialog.jsと言います。

(function($、undefined){

$ .widget( 'fsrc.fsrc_dialog'、$ .ui.dialog、{open:function(){// //役に立つvar var var self = this、options = self.options;

//親メソッドを呼び出します - オーバーレイを作成し、それをself.overlay変数に保存します。

if(options.showOverlay){//すぐにオーバーレイを非表示にしてアニメート//ハックをするが、jqueryのUI開発者はこれ以上良い方法を残さないself.overlay。$ el.hide()。show(options.showOverlay)} if(options) closeOnOverlay){//オーバーレイをクリックしてダイアログを閉じるself.overlay。$ el.click(function(){self.close();})} retを返します。 function(event){var self = this、options = self.options;}。

if(options.hideOverlay){// self.overlayを保存したり設定解除したりするので、アニメーション中に親関数によって破棄されることはありません。var overlay = self.overlay self.overlay = null; $ el.hide(options.hideOverlay、function(){//親がアニメーションの後にオーバーレイを破棄することでoverlay.destroy();})}

//親メソッドを呼び出すvar ret = $ .ui.dialog.prototype.close.apply(this、arguments); retを返す。 ;}});

(jQuery));

ページ内:

<! -  jQuery(document).ready(function(){jQuery( '#show')。click(function(){jQuery( '#order_form_container'))fsrc_dialog({modal:true、closeOnOverlay:true、show: {効果: "フェード"、期間:500}、showOverlay:{効果: "フェード"、期間:500}、非表示:{効果: "フェード"、期間:300}、hideOverlay:{効果: "フェード"、期間:300}、});})}) - > `

私は私の名前空間、ウィジェット、そしてオプションを私の好むように命名しました。

テスト済みのjquery1.7.2、jquery-ui1.8.19、IE9、ff11、chrome18.0.1025.168m、opera11.61


0


$( '。ui-widget-overlay')。hide()。fadeIn();

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


0


Sam Barnesからの回答を修正する必要がありました(ダイアログのクリック機能も$(document).ready関数に入れました)

$( "。dialog")。(function(){$( '。ui-widget-overlay')。hide()。fadeIn(); $( "div.dialog")。dialog({サイズ変更:false、 close:function(){$( '。ui-widget-overlay')。hide();}、show: "fade"、hide: "fade"}); $( "。ui-dialog")。fadeIn( falseを返します。 $( "。ui-widget-overlay")。クリック(function(){$(this).hide(); $( "。ui-dialog")。hide();});

.ui-widget-overlay {背景:黒;不透明度:0.5。フィルタ:アルファ(不透明度= 50)。位置:絶対トップ:0。左:0; }

いくつかのメッセージ!

追加することで、エスケープボタンを押したときに隠れるものを追加できます。

$(document).keyup(関数(e){

if(e.keyCode == 27){$( "。ui-dialog")。hide(); $( '。ui-widget-overlay')。hide(); ;}});