Question

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

<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>

Answer 1

只需替换它：

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

设置

  style='display:none'

Answer 2

在First Set显示属性，如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>

Answer 3

尝试改为调用函数：

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>

在链接点击上创建弹出窗口？

3 个答案: