zahed zahed - 2 months ago 23
Javascript Question

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

Modal pop is not appearing using asp.net C# and got one example but that example is not working using asp.net C# web forms.

Below is my design code.

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


Below is my body design code.

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


I am trying working fiddle: http://jsfiddle.net/92jv0erw/ but popup is not showing only text showing in body.

Answer

Following on from comments and chat, there are a couple of issues in the originally posted code:

1) There's no reference to jQuery or jQuery UI in the original code. The references to those scripts need to be included.

2) The JS code which attempts to set the dialog box up is running before the HTML element it references exists - because the script is above it in the page, the script is executed before the element actually exists in the browser, causing it to fail. The simplest solution to this is to move the script below the HTML markup. So you should move the <script type="text/javascript"> block and all its contents to the bottom of the page. A sensible place would be between the </form> and </body> closing tags.