Диалоговое окно JQuery UI показывает "Div диалогового окна" перед отображением - PullRequest
2 голосов
/ 19 ноября 2010

У меня есть диалоговое окно JQuery UI, которое автоматически открывается, когда пользователь заходит на мой сайт, поэтому мы можем показывать диалоговое окно «В разработке» модально.Вот код для диалога:

    var $dialog = $('#dialog');
if ($.cookie("MySitePreviewCookie") != "firstView")
 $(function () {
   $.cookie("MySitePreviewCookie", "firstView", { expires: 180, path: '/' });
   // Show Dialog Div
   $dialog.dialog({
     autoOpen: true,
     resizable: false,
     modal: true,
     width: 600,
     buttons: {
       "Skip This": function () {
         $(this).dialog("close");
       }
     }
   });
  });
else
  $(function () {
     // HIDE Dialog Div 
     $dialog.dialog({
     autoOpen: false,
     resizable: false,
     modal: true,
     width: 600,
     buttons: {
       "Skip This": function () {
        $(this).dialog("close");
       }
     }
   });
 });

Вот разметка диалога:

 <div id="dialog" title="Welcome to MySite" class="dialogStyles">
   <p>
   Our site is still under construction but please look around and get a feel for what
   we plan to offer. If you would like to sign-up for our newsletter, please enter
   your email address below and click the <strong>Sign-up for Newsletter</strong> button.
   </p>
   <p class="validateTips"></p>
   <br />
   <input type="text" id="ccEmailAddress" name="ccEmailAddress" class="required email"
      style="width: 250px" />
   &nbsp; &nbsp;<input id="btnAddNewsletter" class="submit" type="submit" value="Sign-    up    for Newsletter" />
</div>

Диалог отлично работает.У меня есть CSS для стилизации, и это выглядит великолепно, за исключением того факта, что при первой загрузке страницы есть куча изображений, которые она отображает за ней (домашняя страница).Он показывает (который расположен в самом низу страницы), а затем появляется диалоговое окно, и все в порядке.Как я могу заставить его перестать показывать DIV на странице и не влиять на диалог?

1 Ответ

1 голос
/ 18 февраля 2014

Нет прямого ответа на этот вопрос, поэтому, чтобы облегчить его и, надеюсь, тем, кто ищет ответ, похожий на этот, это подойдет для вашей ситуации. Zod верный ... использование <style type="text/css"> .dialog {display:none}</style> предотвратит любой ввод или текст в диалоге, который будет отображаться на странице раньше. Кроме того, использование «документа готово» должно препятствовать тому, чтобы документ показывал что-либо, пока все, что нужно загрузить, не будет готово.

...