0

您好我正在尝试创建一个仅在单击链接时显示的弹出窗口。这是我拥有的代码，但问题是在页面加载时显示对话框，而不是在单击时显示。

<script type="text/javascript">
    $(document).ready(function () {
        $("#OpenDialog").click(function () {
            $("#dialog").dialog({ modal: true, height: 250, width:200 });
        });
    });
</script>
<a id="OpenDialog" href="#">Click here to open dialog</a>
<div id="dialog" title="Dialog Title">
    <p>Dialog Contents here</p>
</div>
4

3 回答 3

0

简单地替换这个：

<div id="dialog" style="display:none;" title="Dialog Title">
    <p>
        Dialog Contents here</p>
</div>

放 

  style='display:none'
于 2013-04-05T11:54:59.197 回答
0

首先设置显示属性，如 display:none;

<script type="text/javascript">
$(document).ready(function () {
    $("#OpenDialog").click(function () {
$("#dialog").show();
        $("#dialog").dialog({ modal: true, height: 250, width:200 });
    });
});
</script>
<body>
<a id="OpenDialog" href="#">Click here to open dialog</a>
<div id="dialog"  style="display:none;"title="Dialog Title">
<p>Dialog Contents here</p>
</div>
于 2013-04-05T12:00:52.283 回答
-1

尝试调用一个函数：

var dialogBox = function()  {
   $("#dialog").dialog({ modal: true, height: 250, width:200 });
};
$(document).ready(function () {

    $("#OpenDialog").click(function () {
        dialogBox();
    });
});

在 HTML 中：

<div id="dialog" title="Dialog Title" style='display:none;'>
    <p>Dialog Contents here</p>
</div>
于 2013-04-05T11:50:00.157 回答