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

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

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

Затем JQuery вызывается в javascript, который преобразует <div> в диалоговом окне:

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

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

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

С течением времени, по мере роста размера страницы, время, в течение которого страница будет отображаться некорректно, росла. Я предполагаю, что механизм рендеринга браузера отображает страницу по мере ее загрузки, а затем в конце запускает JQuery, который преобразует <div> в диалог. Затем эта функция JQuery преобразует простой <div> в диалоговом окне JQuery и скрыть его (поскольку свойство autoOpen установлено в false). Некоторые браузеры <cough> IE </cough> отображать его больше, чем другие. В моем диалоговом окне с большими истями теперь страница некорректно отображается примерно на 1 секунду... YUCK!

Ответ 1

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

#myDialog { display: none; }

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

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

С помощью этого CSS:

.dialog { display: none; }

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

Ответ 2

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

Проблема заключается в том, что браузер отображает DOM по мере его загрузки, а затем запускает JQuery.js в конце, который скрывает его. Итак, что я делаю, отключает видимость в родительском <div> так что все содержимое диалогового окна скрыто по умолчанию, а затем поворачивает этот родительский <div> тег в .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 с этим исправлением является приемлемым, хотя и не идеальным.

Ответ 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> id, который не предназначен для скрытия:

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

и установите для своего диалогового идентификатора что-то вроде "моего диалога образца"

Ответ 4

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

HTML

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

CSS

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

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