С виджетом диалогового окна YUI он работает хорошо, за исключением того, что в больших диалоговых окнах (думаю, много контента) на странице появляется заметный побочный эффект ... много пробелов в конце страницы и полоса прокрутки.
Вот пример:
-> http://jsbin.com/ekaca4
Все, что я сделал, это взял оригинальный пример для диалога с developer.yahoo.com/yui/examples/container/dialog-quickstart_clean.html и добавил дополнительную разметку (в форме Lorem Ipsum).
Если вы посмотрите, как настроен код, разметка (в # dialog1) будет полностью видна на странице до тех пор, пока не будет запущено Yahoo.util.Event.onDomReady, и диалоговое окно будет создано в
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 } ]
});
В этот момент простая Джейн <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; Переполнение: скрыто, я получаю странные побочные эффекты, такие как наложение неправильно отображается при его отображении. До сих пор единственным способом, который оказал какое-либо реальное влияние, было помещение # dialog1 в содержащий div с height: 0; Переполнение: скрыто, но это не работает в IE7 (пробелы все еще присутствуют на странице после init).
Спасибо за вашу помощь, я действительно ценю это.