it-swarm.com.ru

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?

Решение:

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

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

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

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

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

.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

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

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 ({модальный: истинный}); $ ( 'Щ-диалог'.) Скрыть ().

0
Frederic