Диалоговое окно Jquery не отображается правильно

Question

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

Вот код моего диалогового окна div:

    <div id="photoAdd_dialog" title="Upload Photos">
    <form name="photoInfo_form" action="" method="post" id="photoInfo_form">
       ...html markup for several input fields...
     </form>
   </div>

   <script type="text/javascript">
   $(document).ready(function(){
 $("#photoAdd_dialog").dialog(
               {autoOpen: false,
                   width: 400,
                   resizable: false,
                   modal: true}
 );
 //end of the dialog setting
 $("#reminder").css("display","none");

 });
//end of preload
    .... form validation javascript here
 </script>

Что я сделал:

• Убедитесь, что файлы jquery css и jsобновлены и указывают на правильное местоположение

• Включен другой диалог jquery на этой странице, и он работал отлично. Он был скрыт, пока пользователь не щелкнет ссылку, чтобы вызвать диалоговое окно.

Полностью застрял на этом.Цени любую помощь!Благодаря.

Answer 1

Я полагаю, вы используете JQuery UI для диалога? Правильно ли связан файл JS?

Во-вторых, если ваша страница не загружается ВСЕ, у вас, вероятно, появляется ошибка. Используйте Chrome Dev Tools или Firebug, чтобы увидеть вывод консоли JS.

Где вы открываете диалог?

Все, что вам нужно для инициализации диалога:

//Auto opens by default
$("#photoAdd_dialog").dialog()

//To open the dialog
$("#photoAdd_dialog").dialog('open')

//To close the dialog
$("#photoAdd_dialog").dialog('close')

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

В общем, я бы сделал это:

//link to JS files here

<script type="text/javascript">
    $(document).ready(function(){
        $("#photoAdd_dialog").dialog(
        {
            autoOpen: false,
            width: 400,
            resizable: false,
            modal: true,
            title: "Upload Photos",
        });
    });
</script>

<script type="text/javascript">
    $(".opener").onClick(function(e){
        //stops the click from changing the page and whatever other default action would happen.
        e.preventDefault();
        $("#photoAdd_dialog").dialog('open');
    });

    $(".closer").onClick(function(e){
        //stops the click from changing the page and whatever other default action would happen.
        e.preventDefault();
        $("#photoAdd_dialog").dialog('close');
    });
</script>

// конец головы и начало тела

<div id="photoAdd_dialog">
    ...html markup for several input fields...
</div>

//I prefer classes, since IDs tie up namespace.  Not totally relevant for a small JS application though.
<a href="#" class="opener">Open Photo Add Dialog</a>

<a href="#" class="closer">Close Photo Add Dialog</a>

Обязательно ознакомьтесь с демонстрационными страницами jQuery UI: http://jqueryui.com/demos/dialog/#modal

Удачного кодирования!

Answer 2

Хорошо, я нашел оскорбительный кусок кода. Оказывается, ничего не делать с JS / JQuery. Внутри моего диалогового окна у меня был этот код, который извлекал данные для моего поля ввода. Я закомментировал этот код. Как только я удалил это, диалоговое окно работает отлично. До сих пор не знаю, почему это может вызвать проблему, но вот код:

               <!-- <?php $em=getAllEm();?> 
<?php foreach($em as $e):?>
    <option value="<?=$e[0]?>"><?php echo $e[1];?></option>
<?php endforeach;?> -->

Я ценю помощь каждого!

Answer 3

Предполагая, что вы используете jQuery UI, есть отличный вспомогательный класс css, просто измените ваш div следующим образом:

<div id="photoAdd_dialog" title="Upload Photos" class="ui-helper-hidden">

ALl это применяет display:none через класс вCSS.Это хорошо, так как он не учитывает встроенные выражения стиля, хотя многие считают, что style="display:none;" нормально, это зависит от того, с кем вы говорите.

Answer 4

Должен

$("#reminder").css("display","none"); 

действительно будет

$("#photoAdd_dialog").css("display","none");

Или ...

Что если вы просто вставите style="display: none;" в строку и не будете беспокоиться об изменениях с помощью jQuery, так как в любом случае это значение по умолчанию?