Javascript 单击按钮时显示对话框

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

在我的js部分，我有

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

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

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

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

在我的html部分，我有

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

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

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

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

嗨，你好吗

创建新报告

没有显示任何内容，我没有任何错误

---

为什么？

尝试使用

显示：无

而不是

可见性：隐藏

来最初隐藏对话框

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

嗨，你好吗

---

还要确保jQuery和jQuery UI被正确加载。这把小提琴起作用了：

你没有必要在你的div上加上这种风格

应该是这样的：

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

嗨，你好吗

---

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

不起作用，但可能是因为我的jsp页面是一个iframe？如果我把代码放在另一个页面中，那就行了。@roberttrudel在iframe中加载的标记是否包含jQuery和jQuery UI？我认为它无法访问父页面中的那些资源。