There are multiple components to consider here. Firstly, the Javascript code in the head of the ASPX page is as follows:
<!--//**********************************
// Test modal popup
//********************************** -->
<script type="text/javascript">
//Total out of range dialog
$(function () {
$("#dialog").dialog({
modal: true,
// autoOpen: false,
width: 570,
buttons: {
"Ok": function () { $(this).dialog("close"); },
"Cancel": function () { $(this).dialog("close"); }
}
});
});
</script>
Additionally, towards the end of the extensive ASPX page, we have the modal section like so:
<div id="dialog" title="ATTENTION">
<table style="width:565px; border-spacing:0px; border-collapse:collapse;">
<tr>
<td style="width:65px; ">
<img src="http://someimage" style="height: 120px; width: 80px" />
</td>
<td style="vertical-align:top">
<p>some text</p>
</td>
</tr>
</table>
</div>
</asp:Content>
Finally, in the code-behind file, the following code snippet exists:
if (!Page.IsPostBack)
{
if (MyServer.Contains("localhost"))
{
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "dlgOutOfRange",
"$(function() {$('#dialog').dialog('open');});", true);
}
The functionality has been tested and verified. However, there seems to be an issue where the modal appears when it shouldn't, even though the Page.IsPostback condition is not met. For example, upon changing a value in a dropdown with a SelectedIndexChange function assigned to it, the modal pops up unexpectedly. Is there something missing in the div element that is causing this behavior? Attempting to set style="Visible: False;" resulted in only hiding the text.