JQuery открыть всплывающее окно не работает

Question

Я пытаюсь открыть всплывающее окно, выполняя основные действия для начала, но вместо этого показывает мне диалоговое окно при загрузке страницы, плюс кнопка ничего не вызывает.

$(document).ready(function() {
        $( "#dialog" ).dialog({ autoOpen: false });
        $( "#opener" ).click(function() {
            $( "#dialog" ).open();
        });
    });

Вот мои элементы:

<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title" hidden="hidden">I'm a dialog</div>

Это мой импорт:

<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="scripts/json.debug.js"></script>

jquery-ui-1.11.1.js содержит только Core, а не Widget, Mouse и Position.

Что я делаю не так или забываю импортировать?

Спасибо,

Answer 1

Для открытия диалога по клику:

 $( "#opener" ).click(function() {
  $('#dialog').dialog('open');
 });

как вам нужно показать это при загрузке страницы, напишите $('#dialog').dialog('open'); в готовом событии.

Рабочая Демо

Answer 2

От зависимостей до верхней части страницы API диалога необходимо следующее:

• UI Core
• Фабрика Виджетов
• Позиция
• кнопка

и следующие являются необязательными:

• Draggable (необязательно; для использования с параметром Draggable)
• Изменяемый размер (необязательно; для использования с параметром изменяемого размера)
• Ядро эффектов (необязательно; для использования с параметрами show и hide)

Если ваш jquery-ui-1.11.1.js содержит только ядро, возможно, именно поэтому он не работает для вас.