blocks|key|1136316|text|你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1136317|<style+type="text/css">
++++*+{border:0;margin:0}
.ui-widget-overlay+{
++++background:+repeat-x+scroll+50%25+50%25+#AAA;
++++opacity:0.3;
}

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

</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>|code-block|syntax|javascript|1136318|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You could do something like this:</p>

<pre><code>&lt;style type="text/css"&gt;
    * {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%;
}

&lt;/style&gt;
&lt;script type="text/javascript"&gt;

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

        $(window).resize(function () {
            $overlay.width($(document).width());
            $overlay.height($(document).height());
        });
    });
&lt;/script&gt;
</code></pre>


blocks|key|1136371|text|这是你的CSS的一个想法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1136372|.ui-widget-overlay+{+
++position:+absolute;
++top:+0;
++left:+0;
++right:+0;
++bottom:+0;

++background-color:+#444;

++/*+add+some+opacity+here+*/
}+|code-block|syntax|javascript|1136373|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here's a thought for your CSS:</p>

<pre><code>.ui-widget-overlay { 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background-color: #444;

  /* add some opacity here */
} 
</code></pre>


blocks|key|1136394|text|这是一个古老的问题，但我偶然发现了它，并从那以后想出了一个对我来说似乎更简单的解决方案(在chrome/ie中测试)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1136395|下面的css类与jquery+ui的ui-widget-overlay结合使用似乎可以做到这一点：|1136396|.modalOverlay+{
+++position:+fixed;
+++width:+100%25;
+++height:+100%25;
+++z-index:+1001;
}|code-block|syntax|javascript|1136397|根据需要调整z索引。通过使用固定位置和宽度/高度设置为100%25，您不必调整覆盖的大小。|1136398|请注意，如果允许的话，ui-widget-overlay会将位置覆盖为绝对位置。|1136399|在此jsfiddle中查看它的实际效果|offset|length|1136400|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/larsolesimonsen/7dKaq/23/^0|0|0|0|0|0|2|8|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>This is an old question, but I stumbled on it and have since come up with a solution that seems simpler to me (tested in chrome/ie).</p>

<p>The following css class used in conjunction with jquery ui's ui-widget-overlay seems to do the trick:</p>

<pre><code>.modalOverlay {
   position: fixed;
   width: 100%;
   height: 100%;
   z-index: 1001;
}
</code></pre>

<p>Tweak the z-index as necessary. By using fixed position and width/height set to 100%, you don't have to resize the overlay.</p>

<p>Note that ui-widget-overlay will override position to absolute, if you let it.</p>

<p>See it in action in this <a href="http://jsfiddle.net/larsolesimonsen/7dKaq/23/" rel="noreferrer">jsfiddle</a></p>


blocks|key|1136431|text|这对于奇怪的屏幕或框架集会更好地工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1136432|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%25');
$(overlay).height('100%25');
$(overlay).fadeIn();|code-block|syntax|javascript|1136433|查看：http://jsfiddle.net/techunter/MdjBr/6/|offset|length|1136434|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/techunter/MdjBr/6/^0|0|0|3|12|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>this will work better for weird screens or with framesets :</p>

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

<p>check it out:
<a href="http://jsfiddle.net/techunter/MdjBr/6/" rel="nofollow">http://jsfiddle.net/techunter/MdjBr/6/</a></p>


blocks|key|1136466|text|我知道现在回答这个问题为时已晚，但添加这两个函数的方法更简单|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1136467|open:+function()+{
+++++$('.ui-widget-overlay').css('position',+'fixed');
++++++},
close:+function()+{
++++++$('.ui-widget-overlay').css('position',+'absolute');+++
++++++}+,|code-block|syntax|javascript|1136468|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I know this is too late to give answer for this question but simpler way to add this two function </p>

<pre><code>open: function() {
     $('.ui-widget-overlay').css('position', 'fixed');
      },
close: function() {
      $('.ui-widget-overlay').css('position', 'absolute');   
      } ,
</code></pre>


blocks|key|921943|text|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;"></div></div>').hide().appendTo($('body'));
$(overlay).width('100%25');
$(overlay).height('100%25');
$(overlay).fadeIn();|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|921944|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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


blocks|key|921989|text|这很简单，只需使用以下代码即可创建overlay：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|921990|var+overlay+=+new+$.ui.dialog.overlay();|code-block|syntax|javascript|921991|当你不得不销毁它的时候，使用下面的代码：|921992|overlay.destroy();|921993|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>It's very simple, to create overlay just use this code:</p>

<pre><code>var overlay = new $.ui.dialog.overlay();
</code></pre>

<p>and when you have to destroy it use this code:</p>

<pre><code>overlay.destroy();
</code></pre>


blocks|key|922029|text|检查:+var+$dial=$('')；$dial.dialog({modal:true})；$(‘.ui-$dial=$’).hide()；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|922030|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Check that:
    var $dial=$('');
    $dial.dialog({modal:true});
    $('.ui-dialog').hide();</p>


<p>I am trying to create an overlay, similar to the one that jQuery UI Dialog uses. I can create the overlay like this:</p>
<pre><code>var $overlay = $('&lt;div class=&quot;ui-widget-overlay&quot;&gt;&lt;/div&gt;').hide().appendTo('body');

//...later in my script
$overlay.fadeIn();
</code></pre>
<p>But the overlay cuts off when I scroll down. I noticed that jQuery UI is setting the width and height on that div dynamically. So I would like to reuse this functionality instead of reinventing the wheel. How can I create an overlay like this, or reuse the one in jQuery UI?</p>
<h2>Solution:</h2>
<p>Set the width/height of the overlay to be the width/height of the document, then bind a function on the window resize event to adjust the overlay width/height to match the new document width/height:</p>
<pre><code>$(document).ready(function(){
    var $overlay = $('&lt;div class=&quot;ui-widget-overlay&quot;&gt;&lt;/div&gt;').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());
}
</code></pre>
<p>Note that whenever the height of the document changes (adding elements, animating elements that slide down, etc), you will need to resize the overlay.</p>


jQuery UI: How to use ui-widget-overlay by itself?

jQuery

我正在尝试创建一个覆盖图，类似于jQuery UI对话框使用的覆盖图。我可以像这样创建覆盖图：var $overlay = $('<div class="ui-widget-overlay"></div>').hide().appendTo('body');//...later in my script$overlay...

问jQuery UI:如何单独使用ui-widget-overlay？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery UI:如何单独使用ui-widget-overlay？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery UI:如何单独使用ui-widget-overlay？
EN