it-swarm.com.ru

Диалоговое окно 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!

30
Kevin Won

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

#myDialog { display: none; }

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

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

С этим CSS:

.dialog { display: none; }

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

48
Nick Craver

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

Проблема в том, что браузер отображает 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 с этим исправлением приемлем, хотя и не идеален.

0
Kevin Won

Я использую селекторы 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; }

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

0
Amit

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

HTML

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

CSS

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

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

0
Lee Gunn