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

Question

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

Вот код моего диалога 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

Если

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

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

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

Или ...

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

Answer 2

Я предполагаю, что вы используете интерфейс jQuery для диалога? Правильно ли связан 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 3

Предполагая, что вы используете JQuery UI, то есть отличный вспомогательный класс CSS, построенный в просто изменить свой DIV так:

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

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

Answer 4

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

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

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