Диалог YUI2 неправильно скрывает разметку диалога

С виджетом Dialog от YUI он работает хорошо, за исключением того, что с большими диалогами (например, с большим количеством контента) на странице появляется заметный побочный эффект... много пробелов в конце страницы и полоса прокрутки.

Вот пример:

-> http://jsbin.com/ekaca4

Все, что я сделал, это взял исходный пример диалогового окна на странице developer.yahoo.com/yui/examples/container/dialog-quickstart_clean.html и добавил дополнительную разметку (в виде Lorem Ipsum).

Если вы посмотрите на то, как настроен код, разметка (в #dialog1) полностью видна на странице, пока не сработает Yahoo.util.Event.onDomReady, а экземпляр Dialog не будет создан в

YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", 
      { width : "30em",
        fixedcenter : true,
        visible : false, 
        constraintoviewport : true,
        buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
             { text:"Cancel", handler:handleCancel } ]
      });

В этот момент обычная jane <div id="dialog1">, содержащая всю мою разметку, оборачивается контейнером <div class="yui-panel-container yui-dialog yui-overlay-hidden shadow" id="dialog1_c" style="visibility: hidden; z-index: 2; left: 307px; top: 10px;">.

Это было бы хорошо, за исключением того, что этот контент по-прежнему является частью моего макета, а полоса прокрутки и вертикальное пространство присутствуют. Если я попытаюсь добавить стили в yui-overlay-hidden, например display:none или height:0; overflow:hidden, я получаю странные побочные эффекты, такие как неправильное расположение оверлея при его отображении. До сих пор единственный способ, который имел какое-либо реальное влияние, заключался в помещении #dialog1 в содержащий div с высотой: 0; overflow:hidden, но это не работает в IE7 (пробелы все еще присутствуют на странице после инициализации).

Спасибо за вашу помощь, я очень ценю это.


javascript yui yui2
person nym    schedule 20.01.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я поместил все свои диалоги в div со следующим css:

div.dialogs{display:none;position:fixed;top:0px;left:80px;

Пока работает нормально, у меня больше нет полосы прокрутки и вертикального пробела из-за диалогов. Я включаю display:none, чтобы скрыть html до тех пор, пока диалоги не будут отрисованы, после того как они будут отрисованы, я изменяю отображение на «блок». Без этого предварительно обработанный html виден секунду или две, что приводит к мерцанию страницы.

person mfclock    schedule 13.03.2013