Почему jquery не показывает мой div в диалоговом окне?

Я пытаюсь следовать this basic jquery dialog article о том, как открыть модальный диалог. Код выглядит так.Почему jquery не показывает мой div в диалоговом окне?

<!doctype html> 
<html> 
    <meta charset="utf-8"> 
    <title>Basic usage of the jQuery UI dialog</title> 

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     var $dialog = $('<div></div>') 
      .html('This dialog will show every time!') 
      .dialog({ 
       autoOpen: false, 
       title: 'Basic Dialog' 
      }); 

     $('#opener').click(function() { 
      $dialog.dialog('open'); 
      // prevent the default action, e.g., following a link 
      return false; 
     }); 
    }); 
    </script> 
</head> 
<body> 

<p>This is an example from the Nemikor Blog article <a href="http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/">Basic usage of the jQuery UI dialog</a>.</p> 

<button id="opener">Open the dialog</button> 

</body> 
</html>

(где я пропустил счетчик страниц для краткости). Исходный пример отлично работает; отображается модальный диалог.

Теперь я хотел бы объединить эту удивительность с моим рельсовым приложением, создав модальное диалоговое окно, как указано в chourobin's answer. Я добавил

<div class="modal" style="display:none;"> 
    <h1>Test</h1> 
</div>

часть к телу, и изменил мой $('#opener') к

$('#opener').click(function() { 
    $(".modal").dialog('open'); 
    //$('.modal').css("border", "3px solid red"); 
    return false; 
});

К сожалению, не открывается диалоговое окно. Тем не менее, когда я устанавливал div modal по умолчанию и комментировал вызов dialog и раскомментировал вызов css в вышеуказанном коде, jquery успешно идентифицирует класс modal и рисует 3-пиксельную, красную сплошную рамку вокруг моего div.

Мой вопрос: почему нет jquery, отображающего (четко идентифицируемый) div в диалоге, как в моей первоначальной попытке?

источник

2014-02-02 conciliator

$(".modal").dialog();

Это то, что вы ищете

источник

2014-02-02 20:52:43 ingo

вы абсолютно правы. Я видел это, у меня просто не было фантазии попробовать. Благодаря! :) – conciliator

Поскольку <div class="modal"> не отображается, когда страница загружена, вам необходимо использовать метод .on() и привязать событие к родительскому объекту <div>.

Try что-то вроде

$('body').on('click','.modal',function(){ 
//your code here 
});

источник

2014-02-02 20:37:25 MikaelR

У вас есть два различных вызовов для диалога. При первом вызове вы установили некоторые параметры. На второй звонок у вас нет.

Я бы предложил удалить атрибут стиля inline (так как это скрывает его) и добавить параметр для диалога. как ваш рабочий пример.

<!-- Removed the inline style --> 
<div class="modal" title="Testing the Modal Code"> 
    <h1>Test</h1> 
</div> 

//-- Adding this 
$('.modal').dialog({ 
    autoOpen: false 
}); 

//-- Using the same call 
$('#opener').click(function() { 
    $(".modal").dialog('open'); 
    //$('.modal').css("border", "3px solid red"); 
});

Это должно обеспечить желаемый результат.

источник

2014-02-02 20:47:11 ZombieCode

диалог будет открываться:

$(".modal").dialog();

Вот пример: http://jsfiddle.net/nH339/

источник

2014-02-02 21:04:31

Почему jquery не показывает мой div в диалоговом окне?

ответ

Смежные вопросы