Диалоговое окно не работает

-1

У меня очень простой код. Я хочу показывать диалоговое окно всякий раз, когда кто-то нажимает гиперссылку.Диалоговое окно не работает

<html lang="en"> 

<head> 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 

<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 

</head> 
<body> 
<form> 
    <a id='theLink' href="#">Common Questions</a> 

     <div id="dialogform1" title="Common Questions" style ="display:none"> 

     <p> this is question 1 </p> 

</div> 
    </form> 
    <script type="text/javascript"> 

$(document).ready(function() 

    { 

    $("#theLink").click(function(e) { 

     $('#dialogform1').dialog("open"); 

    }); 

    }); 

    </script> 

</body> 
</html>

Однако это не открывает диалоговое окно с объявленным ранее содержимым div. Я не знаю, что я делаю неправильно здесь? Я потратил немало часов, чтобы узнать, почему это происходит, но не может найти его. Для этого нужно еще взглянуть на проблему.

Благодарим вас за внимание и ответим на вопрос.

источник

2014-06-19 Vishal

Нужно ли включать библиотека jQuery UI также? – bloodyKnuckles

и могу ли я спросить, почему этот вопрос? – Vishal

Обновленный код:

См jQuery UI Dialog

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html lang="en"> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
    <title></title> 
</head> 

<body> 
    <form> 
     <a href="#" id='theLink' name="theLink">Common Questions</a> 
     <div id="dialogform1" style="display:none" title="Common Questions"> 
      <p>this is question 1</p> 
     </div> 
    </form> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#theLink").click(function (e) { 
       $('#dialogform1').dialog(); 
       $('#dialogform1').dialog("open"); 
      }); 
     }); 
    </script> 
</body> 
</html>

источник

2014-06-19 04:09:57 Okky

Вы должны сделать следующее:

- include jQuery UI -- JS & CSS 
- initialize the dialog widget before trying to open

Ref:

- http://jqueryui.com/dialog/

UPDATE

WORKING JS FIDDLE DEMO

PLAY WITH CODE HERE

После того, как вы включили jQuery UI следующий код, что вам нужно:

$(document).ready(function() { 

    $('#dialogform1').dialog({autoOpen:false}); 

    $("#theLink").click(function(e) { 

     $('#dialogform1').dialog("open"); 

    }); 

});

Все файлы, которые необходимо включить здесь:

- http://code.jquery.com/

источник

2014-06-19 00:48:40 PeterKA

Прошу прощения, не могли бы вы указать мне, в какие файлы/URL/ссылки я должен включить. Я совершенно новичок в jQuery и не знаю этого. – Vishal

http://jqueryui.com/ дает вам два файла, которые вам нужны. – PeterKA

На самом деле в блоге теперь есть ссылки на нужные вам файлы (http://blog.jqueryui.com/) (это было в нижней части страницы @ jqueryui.com) ... не указывайте на бета-версию файлы, поэтому текущее сообщение вам нужно [jQuery UI 1.10.4] (http://blog.jqueryui.com/2014/01/jquery-ui-1-10-4/) – Mottie

Диалоговое окно не работает

ответ

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