Question

我的代码非常简单。我想在有人点击超链接时显示对话框。

 <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内容的对话框。我不知道我在这里做错了什么？我花了很长时间才发现为什么会这样，但似乎无法找到它。需要另一只眼睛看问题。

感谢您花时间回答这个问题。

Answer 1

您必须执行以下操作：

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

价：

- http://jqueryui.com/dialog/

<强>更新

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/

Answer 2

更新的代码：

参考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>

对话框不起作用

2 个答案: