javascript - 单击按钮时显示对话框

Question

当我点击一个按钮时我会显示一个对话框

在我的 js 部分，我有

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

    $('#create-report').click(function() {
        $('#dialog').dialog('open');
    });

在我的 html 部分我有

<div id="dialog" title="Basic dialog" style="visibility:hidden;">
    <p>hi how are you</p>
</div>

<button id="create-report" >Create new report</button>

什么都没有显示，我没有任何错误

为什么？

Answer 1

尝试使用display:none而不是visibility:hidden最初隐藏对话框。

<div id="dialog" title="Basic dialog" style="display:none;">
    <p>hi how are you</p>
</div>

还要确保正确加载 jQuery 和 jQuery UI。这个小提琴有效：http: //jsfiddle.net/E3Pek/

Answer 2

不必将样式放在 div 上。

应该是这样的：

<div id="dialog" title="Basic dialog">
    <p>hi how are you</p>
</div>

记住您必须加载 jquery 脚本的顺序。首先加载 jquery 库，然后加载 jquery-ui。