Как заставить модальное тело AlloyUI правильно отображаться при инициализации как видимое: false?

Я использую модальный AlloyUI "Пример из реального мира" прямо с их сайта: http://alloyui.com/examples/modal/real-world/

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

   visible: true,

в

   visible: false,

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

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

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

Источник

2 ответа

Решение

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

 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();
        }
    );
});
Источник

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

                  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() на hide(), нажав кнопку, эти строки кодов называются:

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

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

Источник
Другие вопросы по тегам