使用asp.net c#时不显示模态弹出窗口

本文关键字：模态 窗口 显示 asp net 使用 | 更新日期: 2023-09-27 18:08:53

Modal pop不出现在使用asp.net c#和得到一个例子，但这个例子是不工作使用asp.net c# web表单

下面是我的设计代码。

<style type="text/css">
body { font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif;    }
 .ui-dialog-osx {
-moz-border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px; border-width: 0 8px 8px 8px;
}
</style>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$("#dialog-message").dialog({
    modal: true,
    draggable: false,
    resizable: false,
    position: ['center', 'top'],
    show: 'blind',
    hide: 'blind',
    width: 400,
    dialogClass: 'ui-dialog-osx',
    buttons: {
        "I've read and understand this": function () {
            $(this).dialog("close");
        }
    }
});

setInterval(function () {
    $('#dialog-message').dialog('open');
    setTimeout(function () {
        $('#dialog-message').dialog('close');
    }, 1000)
}, 2000);
</script>

下面是我的身体设计代码。

<body>
<form id="form1" runat="server">
<div>
    <p>
        Hello World!
    </p>
    <div id="dialog-message" title="Important information">
        <span class="ui-state-default"><span class="ui-icon ui-icon-info" style="float: left;
            margin: 0 7px 0 0;"></span></span>
        <div style="margin-left: 23px;">
            <p>
                We're closed during the winter holiday from 21st of December, 2010 until 10th of
                January 2011.
                <br />
                <br />
                Our hotel will reopen at 11th of January 2011.<br />
                <br />
                Another line which demonstrates the auto height adjustment of the dialog component.
            </p>
        </div>
    </div>
</div>
</form>
</body>

我正在尝试工作小提琴:http://jsfiddle.net/92jv0erw/但弹出窗口不显示只有文本显示在身体。

使用asp.net c#时不显示模态弹出窗口

在评论和聊天之后，在最初发布的代码中有几个问题:

1)原始代码中没有引用jQuery或jQuery UI。需要包含对这些脚本的引用。

2)试图设置对话框的JS代码在它引用的HTML元素存在之前运行-因为脚本在页面中高于它，脚本在元素实际存在于浏览器之前执行，导致它失败。最简单的解决方案是将脚本移到HTML标记下面。因此，您应该将<script type="text/javascript">块及其所有内容移动到页面的底部。一个明智的位置是在</form>和</body>结束标记之间。

相关文章：