JQuery对话框中的HTML不工作

Question

我试图使用点击按钮上的JQuery对话框使我的表弹出。然而，它似乎不起作用。下面是我的代码：

按钮

<div class="inner2">
    <p><button class="more comment"><img src="images/more.png"></button>Some random text here</p>
</div>

HTML我想弹出按钮点击

<div id="dialog-modal" style="display:none">
    <table class="innerTable">
        <thead>
            <tr class="infoHead">
                <td>Name</td>
                <td>Pseudo</td>
            </tr>               
        </thead>
        <tbody>
            <tr>
                <td>Tom Cruise</td>
                <td>BOB</td>
            </tr>
        </tbody>
    </table>
</div>

JQuery脚本

<script>
    $(function() {
       $( ".comment").click(function(){ 
           $( "#dialog-modal" ).dialog({
              height: 140,
              modal: true
            });
           $( "#dialog-modal" ).show();
        });
     });
</script>

当我点击什么都没发生。我确实导入了Jquery库，因为除了这个Jquery之外，其他Jquery工具都在工作。所以我想我可能做错了什么。

任何帮助都很感激。

谢谢。

Answer 1

文档中添加了jQuery UI库吗？

我复制了您的代码并添加了jquery库，它可以工作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
    $(function() {
       $( ".comment").click(function(){ 
           $( "#dialog-modal" ).dialog({
              height: 140,
              modal: true
            });
           $( "#dialog-modal" ).show();
        });
     });
</script>
</head>
<body>
    <div class="inner2">
    <p><button class="more comment"><img src="images/more.png"></button>Some random text here</p>
    <div id="dialog-modal" style="display:none">
    <table class="innerTable">
        <thead>
            <tr class="infoHead">
                <td>Name</td>
                <td>Pseudo</td>
            </tr>               
        </thead>
        <tbody>
            <tr>
                <td>Tom Cruise</td>
                <td>BOB</td>
            </tr>
        </tbody>
    </table>
</div>
</div>
</body>
</html>

下面是一个小摆设：http://jsfiddle.net/L5tumouL/1/

Answer 2

似乎你没有加载jQuery UI。它添加了dialog支持。

http://jsfiddle.net/dvxw6okq/ (注意:选中"jQuery UI 1.9.2“)

Answer 3

在这段代码中，您将css的display属性设置为none。

<div id="dialog-modal" style="display:none">
</div>

尝试将显示设置为阻止。

$(function() {
   $( ".comment").click(function(){ 
       $( "#dialog-modal" ).dialog({
          height: 140,
          modal: true
        });
       $( "#dialog-modal" ).css("display", "block");
       $( "#dialog-modal" ).show();
    });
 });

我觉得这应该能解决问题。