单击按钮时显示对话框

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。