web-dev-qa-db-ja.com

jQuery UI：ui-widget-overlayを単独で使用する方法は？

JQuery UI Dialogが使用するものと同様のオーバーレイを作成しようとしています。次のようにオーバーレイを作成できます。

var $overlay = $('<div class="ui-widget-overlay"></div>').hide().appendTo('body');

//...later in my script
$overlay.fadeIn();

しかし、下にスクロールするとオーバーレイが途切れます。 jQuery UIがそのdivの幅と高さを動的に設定していることに気付きました。したがって、ホイールを再発明する代わりに、この機能を再利用したいと思います。このようなオーバーレイを作成したり、jQuery UIでオーバーレイを再利用したりするにはどうすればよいですか？

解決：

オーバーレイの幅/高さをドキュメントの幅/高さに設定し、ウィンドウのサイズ変更イベントに関数をバインドして、新しいドキュメントの幅/高さに合わせてオーバーレイの幅/高さを調整します。

$(document).ready(function(){
    var $overlay = $('<div class="ui-widget-overlay"></div>').hide().appendTo('body');

    $('.trigger').click(function(){
        $('div').slideDown();
        $('.ui-widget-overlay').fadeIn();
        setOverlayDimensionsToCurrentDocumentDimensions(); //remember to call this when the document dimensions change
    });

    $(window).resize(function(){
        setOverlayDimensionsToCurrentDocumentDimensions();
    });
});

function setOverlayDimensionsToCurrentDocumentDimensions() {
    $('.ui-widget-overlay').width($(document).width());
    $('.ui-widget-overlay').height($(document).height());
}

ドキュメントの高さが変化するたびに（要素の追加、スライドするアニメーション要素など）、オーバーレイのサイズを変更する必要があることに注意してください。

jqueryjquery-uijquery-ui-dialog
18
Andrew

あなたはこのようなことをすることができます：

<style type="text/css">
    * {border:0;margin:0}
.ui-widget-overlay {
    background: repeat-x scroll 50% 50% #AAA;
    opacity:0.3;
}

.ui-widget-overlay {
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
}

</style>
<script type="text/javascript">

    $(function () {
        var $overlay = $('<div class="ui-overlay"><div class="ui-widget-overlay"></div></div>').hide().appendTo('body');
        $overlay.fadeIn();

        $(window).resize(function () {
            $overlay.width($(document).width());
            $overlay.height($(document).height());
        });
    });
</script>
9
fehays

JQuery 1.4.4以降、次のように簡単になっています。

_$.ui.dialog.overlay.create();
_

更新

これはフィドルです 。

上記のコードはHTML要素を返すため、次のように使用する必要があります。

_$("body").append($.ui.dialog.overlay.create());
_

更新2

言われたように、これはjquery 1.10では機能しません。これを修正するために、独自のオーバーレイを作成しました。

_<div id="loading" style="display: none;">   
    <div class="loading-container">         
        <img src="/img/loading.gif"/>
    </div>                                  
</div>                                      
_

（画像は、ページがロードされていることを示すために中央に表示したいランダムな画像です）次に、このCSSを追加しました：

_/* loading overlays */       
#loading {                   
    position: fixed;         
    top: 0;                  
    left: 0;                 
    width: 100%;             
    height: 100%;            
    background-color: #000;  
    filter:alpha(opacity=50);
    -moz-opacity:0.5;        
    -khtml-opacity: 0.5;     
    opacity: 0.5;            
    z-index: 10000;          
}                            
.loading-container {         
    position:fixed;          
    top: 50%;                
    left: 50%;               
}                            
_

次に、$('#loading').show()および$('#loading').hide()を呼び出して、非表示にして削除できます。

私はここで答えを微調整する必要がありました： スタックオーバーフロー応答

17
isaaclw

これは古い質問ですが、私はそれを偶然見つけ、それ以来私にはもっと簡単に思える解決策を考え出しました（chrome/ieでテスト済み）。

Jquery uiのui-widget-overlayと組み合わせて使用​​される次のcssクラスは、トリックを行うようです：

.modalOverlay {
   position: fixed;
   width: 100%;
   height: 100%;
   z-index: 1001;
}

必要に応じてz-indexを微調整します。固定位置と100％に設定された幅/高さを使用することにより、オーバーレイのサイズを変更する必要はありません。

可能であれば、ui-widget-overlayは絶対位置にオーバーライドします。

これを実際に見てください jsfiddle

4
LOAS

オーバーレイを作成するには、次のコードを使用するだけです。

var overlay = new $.ui.dialog.overlay();

そして、あなたがそれを破壊しなければならないとき、このコードを使います：

overlay.destroy();
2
Sabeeh Chaudhry

CSSの考え方は次のとおりです。

.ui-widget-overlay { 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background-color: #444;

  /* add some opacity here */
}
1
codeinthehole

これはこの質問に答えるには遅すぎますが、この2つの関数を追加する簡単な方法です

open: function() {
     $('.ui-widget-overlay').css('position', 'fixed');
      },
close: function() {
      $('.ui-widget-overlay').css('position', 'absolute');   
      } ,
1
Amol

これは奇妙な画面やフレームセットでうまく機能します：

var overlay = $('<div class="ui-overlay"  style="position: absolute; top: 0pt; left: 0pt; display: inline-block; overflow: hidden;"><div class="ui-widget-overlay" style="top: 0pt; left: 0pt; width: 9999px; height: 99999px;"></div></div>').hide().appendTo($('body'));
$(overlay).width('100%');
$(overlay).height('100%');
$(overlay).fadeIn();

それをチェックしてください： http://jsfiddle.net/techunter/MdjBr/6/

0
TecHunter

以下を確認してください：var $ dial = $（ ''）; $ dial.dialog（{modal：true}）; $（ '。ui-dialog'）。hide（）;

0
Frederic