Диалоговое окно JQuery, отображаемое по мере загрузки страницы

Question

Я создал страницу с диалоговым окном на основе JQuery, используя стандартную функцию пользовательского интерфейса JQuery. Я делаю это с готовой функциональностью JQuery ... вообще ничего особенного. Вот мой HTML для диалога:

<div id = "myDialog">
    <!-- ... more html in here for the dialog -->
</div>

Затем JQuery вызвал в javascript, который преобразует

в диалог:

    // pruned .js as an example of kicking up a JQuery dialog
    $('#myDialog').dialog({
        autoOpen: false,
        title: 'Title here',
        modal: true
        }
    });

Опять же, простой ванильный JQuery. Таким образом, вы запускаете этот мастер, нажимая на ссылку на родительской странице, и затем он запускает диалоговое окно JQuery, которое содержит значительный фрагмент HTML, включающий изображения и т. Д.

Продолжая разрабатывать эту страницу, я начал замечать, что при загрузке страницы в браузере очень кратко будут отображаться теги

, которые я вставлял в JQuery, и превращаются в диалоги. Тогда страница будет работать как ожидалось. Другими словами, диалог не будет скрыт, он будет кратко отображаться на странице. Довольно уродливый и непрофессиональный вид! Но через долю секунды страница будет правильно отображаться и будет выглядеть так, как я ожидал / хотел.

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

в диалог. Эта функция JQuery преобразует простой

в диалоговое окно JQuery и скрывает его (поскольку для свойства autoOpen установлено значение false). Некоторые браузеры IE отображают его дольше, чем другие. Мой большой диалог теперь заставляет страницу некорректно отображаться в течение примерно 1 секунды ... YUCK!

Answer 1

Вы можете добавить немного CSS, чтобы он по умолчанию был скрыт, код загрузки не требуется:

#myDialog { display: none; }

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

<div id="myDialog" class="dialog"></div>

С этим CSS:

.dialog { display: none; }

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

Answer 2

Если вы используете «всплывающее окно», а не «диалоговое окно», я должен был сделать следующее:

HTML

<div data-role="popup" class="popup">
  <!-- CONTENT -->
</div>

CSS

.popup { display:none; }
.ui-popup-container .popup { display:block; }

Я изначально скрываю всплывающее окно, используя display: none, и после того, как jQueryUI помещает всплывающее окно в контейнер, другой стиль имеет приоритет.

Answer 3

Я использую селекторы CSS3 с небольшим соглашением об именах и тегах. Все мои диалоги являются <div> элементами, а идентификатор всегда оканчивается на «диалог». Затем я использую этот CSS:

div[id$=dialog] { display: none; }

Пример диалога:

<div id="my-sample-dialog" title="Sample Dialog">
      <span>I'm invisible!</span>
</div>

В случае, если CSS3 не вариант, вы можете использовать CSS2 для достижения того же результата, но вы должны быть более осторожны, чтобы не использовать диалоговое имя в любом идентификаторе <div>, не предназначенном для скрытия:

div[id~=dialog] { display: none; }

и установите для своего идентификатора диалога что-то вроде «моего примера диалога»

Answer 4

Я пришел к решению этой проблемы, которое работает нормально, но Мне интересно, кто-нибудь знает о лучшем способе.

Проблема в том, что браузер отображает DOM при загрузке, а затем запускает JQuery .js в конце, который скрывает его. Поэтому я отключаю видимость в родительском теге

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

в .js.

<div id="bodyDiv" style="visibility:hidden"> 
    <div id = "myDialog">
        <!-- ... more html in here for the dialog -->
    </div>
</div>

тогда JQuery .js:

<script type="text/javascript">

$(document).ready(function() {
    //turn the visibility on last thing
    $("#bodyDiv").attr("style", "visibility:visible");
});
</script>

как видите, я просто по умолчанию отключаю видимость всего, чтобы страница отображалась без отображения содержимого диалога, а затем снова включаю видимость. Это не идеальное решение, потому что оно все равно может сделать страницу забавной на секунду, но, по крайней мере, диалог HTML не отображается в строке. UX с этим исправлением приемлем, хотя и не идеален.