簡體   English   中英

使用ASP.NET C#不會出現模式彈出窗口

[英]Modal pop-up is not appearing using asp.net c#

使用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/,但彈出窗口不只顯示正文中顯示的文本。

在評論和聊天之后,原始發布的代碼中存在幾個問題:

1)原始代碼中沒有引用jQuery或jQuery UI。 需要包括對這些腳本的引用。

2)試圖設置對話框的JS代碼在它引用的HTML元素存在之前就已經在運行-因為腳本在頁面中位於其上方,因此腳本在元素實際存在於瀏覽器中之前執行,從而導致失敗。 最簡單的解決方案是將腳本移到HTML標記下方。 因此,您應該將<script type="text/javascript">塊及其所有內容移動到頁面底部。 合理的位置應位於</form></body>結束標記之間。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM