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 динамически устанавливает ширину и высоту этого div. Поэтому я хотел бы повторно использовать эту функциональность, а не изобретать колесо. Как я могу создать наложение, подобное этому, или повторно использовать его в пользовательском интерфейсе jQuery?

Решение:

Задайте ширину/высоту наложения как ширину/высоту документа, а затем привяжите функцию в событии изменения размера окна, чтобы настроить ширину/высоту наложения, чтобы соответствовать новой ширине/высоте документа:

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

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

Ответы

Ответ 1

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

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

Ответ 2

Как и в 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(), чтобы скрыть и удалить его.

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

Ответ 3

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

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

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

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

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

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

Ответ 4

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

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

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

overlay.destroy();

Ответ 5

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

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

  background-color: #444;

  /* add some opacity here */
}

Ответ 6

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

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

Ответ 7

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

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/

Ответ 8

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

Ответ 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;"></div></div>').hide().appendTo($('body'));
$(overlay).width('100%');
$(overlay).height('100%');
$(overlay).fadeIn();