jQuery UI: Как использовать ui-widget-overlay самостоятельно?

Question

Я пытаюсь создать оверлей, похожий на тот, который использует 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());
}

Обратите внимание, что при изменении высоты документа (добавление элементов, анимация элементов, которые скользят вниз и т. Д.) Вам необходимо изменить размер наложения.

Answer 1

Начиная с 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(), чтобы спрятать и удалить его.

Мне пришлось настроить ответ здесь: Ответ переполнения стека

Answer 2

Вы можете сделать что-то вроде этого:

<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>

Answer 3

Это старый вопрос, но я наткнулся на него и с тех пор нашел решение, которое кажется мне более простым (проверено в chrome / ie).

Следующий класс css, используемый в сочетании с оверлеем-виджетом пользовательского интерфейса jquery, кажется, добивается цели:

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

Настройте z-index при необходимости. Используя фиксированное положение и ширину / высоту, установленные на 100%, вам не нужно изменять размер наложения.

Обратите внимание, что ui-widget-overlay переопределит положение на абсолютное, если вы позволите.

См. Это в действии в этом jsfiddle

Answer 4

Это очень просто, чтобы создать оверлей, просто используйте этот код:

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

и когда вам нужно уничтожить его, используйте этот код:

overlay.destroy();

Answer 5

Я знаю, что уже слишком поздно, чтобы дать ответ на этот вопрос, но проще добавить эти две функции

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

Answer 6

Вот мысль для вашего CSS:

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

  background-color: #444;

  /* add some opacity here */
} 

Answer 7

Проверьте, что: var $ dial = $ ('');$ Dial.dialog ({модальный: истинный});$ ( 'Щ-диалог'.) Скрыть ();.

Answer 8

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%');
$(overlay).height('100%');
$(overlay).fadeIn();

Answer 9

это будет работать лучше для странных экранов или с наборами кадров:

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/