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

时间:2013-04-05 11:48:30

标签: javascript html

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

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

3 个答案:

答案 0 :(得分:0)

只需替换它:

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

设置

  style='display:none'

答案 1 :(得分:0)

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

答案 2 :(得分:-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>