单击按钮时显示对话框

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。