Как получить модальное тело AlloyUI для правильной визуализации при инициализации как видимое: false?

Question

Я использую AlloyUI модальность «Реальный пример» непосредственно с веб-сайта по адресу: http://alloyui.com/examples/modal/real-world/

Используя пример дословно и изменения следующей строки из:

visible: true, 

в

visible: false, 

Чтобы модальность отображалась только после нажатия кнопки, а не загрузки страницы, как можно было бы ожидать от диалогового окна. Когда я нажимаю кнопку, чтобы «показать модальные», модальные нагрузки, однако тело диалога не заполняет его пространство должным образом, и панель инструментов выбита против него. При изменении размера все возвращается на место красиво.

Я ищу чистое исправление, до сих пор я считаю, что взломанным исправлением может быть загрузка модала с помощью zIndex, который помещает его за тело страницы, и изменяет z-индекс через CSS с помощью нажатия кнопки (но это кажется действительно хакерским). Возможно, я также мог бы программно изменить размер модальности после того, как кнопка запускает modal.show(), но это вызовет видимый скачок в макете, который я бы хотел избежать.

Любые предложения? Я знаю, что AlloyUI имеет множество скрытых лакомств, поскольку их документация разрежена, возможно, видимый атрибут не тот, который я должен использовать?

Answer 1

После некоторых исследований я нашел ответ на свой вопрос, это все еще может быть взломанным исправлением, но пока кто-то не придумает что-то лучшее, это решение.

Step 1: 
Leave visible: true intact. 

Step 2: 
Invoke .hide() after setting up the modal 

Полный код.

YUI().use('aui-modal', function(Y) { 
    var modal = new Y.Modal({ 
     bodyContent: '<div id="dialogBody"><div id="myTab"></div></div>', 
     centered: true, 
     headerContent: '<h3>Modal Goodness</h3>', 
     height: 600, 
     modal: true, 
     render: '#modal', 
     width: 900 
    }).render(); 

    modal.addToolbar([ 
     { 
      label: 'Save', 
      on: { 
      click: function() { 
       alert('You clicked save!'); 
      } 
      } 
     }, 
     { 
      label: 'Close', 
      on: { 
      click: function() { 
       modal.hide(); 
      } 
      } 
     } 
    ]); 

    modal.hide(); 

    Y.one('#showModal').on(
     'click', 
     function() { 
      modal.show(); 
     } 
    ); 
}); 

Answer 2

Я сделал это почти как вы, только небольшая разница

    modal = new Y.Modal(
        { 
        centered: true, 
        contentBox: '#contentBox', 
        destroyOnHide: false, 
        headerContent: '<h3>Informations to your Orders</h3>', 
        height: 400, 
        modal: true, 
        render: '#modal', 
        resizable: { 
         handles: 'b, r' 
        }, 
        visible: true, 
        width: 450 
        } 
       ).hide(); 

я заменил .render() с шкурой(), нажав кнопку эти строки кодов называются:

   Y.all('#showModal').on(
        'click', 
        function() { 
        modal.show(); 
        } 
       ); 

Невозможно найти способ или параметр на YUI API Docs, чтобы остановить автоматический рендеринг, чтобы он выглядел как «обычный». Я думал, что это может быть атрибут render, но установка его в false или удаление атрибута не вносит никаких изменений в поведение автоматического инициализации.