I am beyond my knowledge here. It has to be something completely obvious that I am just missing. I’m trying to use a jQuery SimpleModal to display a confirmation that a record was added to the database.
I’ve managed to figure out how to get the modal to display; however, only the background of the modal is displaying. The content within the div is not actually displaying in the modal. In fact, nothing is displaying in the modal.
Background:
I use a master page and the default ASP.NET css site settings. I’ve disabled the sites css (as you’ll see from the screenshot) and only using the css from simplemodal. I can not for the life of me get it to show the content.
See this screenshot for what is appearing: 
Here is my aspx:
`<%@ Page Title=”” Language=”VB” MasterPageFile=”~/Site.master” AutoEventWireup=”false”
CodeFile=”CreateDocType.aspx.vb” Inherits=”Admin_CreateDocType” %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.simplemodal-1.4.2.js" type="text/javascript"></script>
<h3>Create New Document Type</h3>
<div>
<asp:Table ID="tblDocType" runat="server">
<asp:TableRow>
<asp:TableCell>
<asp:Label ID="lblType" runat="server" Text="Type/Name:"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="txtType" runat="server"></asp:TextBox>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<asp:Label ID="lblDescription" runat="server" Text="Description:"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="txtDescription" runat="server" TextMode="MultiLine" Height="40"></asp:TextBox>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<asp:Label ID="lblAutoNumber" runat="server" Text="Auto Number:"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:DropDownList ID="ddlAutoNumber" runat="server" AutoPostBack="True">
<asp:ListItem Value="0">N</asp:ListItem>
<asp:ListItem Value="1">Y</asp:ListItem>
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<asp:Label ID="lblPrefix" runat="server" Text="Prefix:"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="txtPrefix" runat="server"></asp:TextBox>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<asp:Label ID="lblSuffix" runat="server" Text="Suffix:"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="txtSuffix" runat="server"></asp:TextBox>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<asp:Label ID="lblPRRequired" runat="server" Text="Periodic Review:"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:DropDownList ID="ddlPRRequired" runat="server" AutoPostBack="True">
<asp:ListItem Value="0">N</asp:ListItem>
<asp:ListItem Value="1">Y</asp:ListItem>
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<asp:Label ID="lblPRInterval" runat="server" Text="Review Interval (months):"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="txtPRInterval" runat="server"></asp:TextBox>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<asp:Label ID="lblSend_LMS" runat="server" Text="Send to LMS:"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:DropDownList ID="ddlSend_LMS" runat="server" AutoPostBack="True">
<asp:ListItem Value="0">N</asp:ListItem>
<asp:ListItem Value="1">Y</asp:ListItem>
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<asp:Label ID="lblLMSCatalog" runat="server" Text="LMS Catalog:"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="txtCatalog" runat="server"></asp:TextBox>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<asp:Label ID="lblActive" runat="server" Text="Active:"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:DropDownList ID="ddlActive" runat="server">
<asp:ListItem Value="0">N</asp:ListItem>
<asp:ListItem Value="1">Y</asp:ListItem>
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="submitButton" />
</div>
*<div id="basic-modal-content" >
<h3>Basic Modal Dialog</h3>
<p>For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with an AJAX response, standard HTML or DOM element(s).</p>
<p>Examples:</p>
<p><code>$('#basicModalContent').modal(); // jQuery object - this demo</code></p>
<p><code>$.modal(document.getElementById('basicModalContent')); // DOM</code></p>
<p><code>$.modal('<p><b>HTML</b> elements</p>'); // HTML</code></p>
<p><code>$('<div></div>').load('page.html').modal(); // AJAX</code></p>
<p><a href='http://www.ericmmartin.com/projects/simplemodal/'>More details...</a></p>
</div>*
<asp:Label ID="lblAddStatus" runat="server" Text="Set at Runtime" Visible="False"></asp:Label>
<asp:RequiredFieldValidator ID="rfvDocType" runat="server" Display="None" ErrorMessage="Type/Name is Required!"
ControlToValidate="txtType"></asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender ID="rfvDocType_ValidatorCalloutExtender" runat="server"
Enabled="True" TargetControlID="rfvDocType">
</asp:ValidatorCalloutExtender>
<asp:RequiredFieldValidator ID="rfvDescription" runat="server" Display="None" ErrorMessage="Description is Required!"
ControlToValidate="txtDescription"></asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender ID="rfvDescription_ValidatorCalloutExtender" runat="server"
Enabled="True" TargetControlID="rfvDescription">
</asp:ValidatorCalloutExtender>
<asp:RequiredFieldValidator ID="rfvPrefix" runat="server" Display="None" ErrorMessage="Prefix is Required when using Auto Number!"
ControlToValidate="txtPrefix"></asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender ID="rfvPrefix_ValidatorCalloutExtender" runat="server"
Enabled="True" TargetControlID="rfvPrefix">
</asp:ValidatorCalloutExtender>
</asp:Content>`
Here is the code behind:
Protected Sub btnSubmit_Click(sender As Object, e As System.EventArgs) Handles btnSubmit.Click
Dim objDocType As New DocType
With objDocType
.Active = ddlActive.SelectedValue
.AutoNumber = ddlAutoNumber.SelectedValue
.Created = DateTime.Now()
.Description = txtDescription.Text
.LastModified = DateTime.Now()
.LMS_Catalog = txtCatalog.Text
.NextDocNumber = 1 'Set default of 1
.PeriodicReview = ddlPRRequired.SelectedValue
If ddlPRRequired.SelectedValue = "Y" Then
.PeriodicReview_Interval = CInt(txtPRInterval.Text)
Else
.PeriodicReview_Interval = 0
End If
.Prefix = txtPrefix.Text
.Send_To_LMS = ddlSend_LMS.SelectedValue
.Suffix = txtSuffix.Text
.Type = txtType.Text
End With
If DocDB.CreateNewDocumentType(objDocType) Then
With lblAddStatus
.Text = "Document Type Was Added Successfully"
.Visible = True
End With
ScriptManager.RegisterStartupScript(Me.Page, GetType(String), "ShowSuccess", "$('#basicModalContent').modal();", True)
Else
With lblAddStatus
.Text = "There was an error creating the Document Type"
.Visible = True
End With
End If
End Sub
And the css:
#basic-modal-content {display:none;}
/* Overlay */
#simplemodal-overlay {background-color:#000; cursor:wait;}
/* Container */
#simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}
#simplemodal-container a.modalCloseImg {background:url(../img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}
I have tried everything I possibly can to narrow this down without any luck. Any ideas for what I can try?
Well I figured it out. Something completely stupid. In using the tutorials it kept listing #basicModalContent as the selector when the Div had an id of basic-modal-content.
So in my RegisterStartupScript line:
the #basicModalContent is not correct. The issue is the selector has to match the div id. Changing the line to:
makes it work. I’m not sure how it’s working in the demo because I copied it piece-by-piece and it doesn’t work on my side. I’ve had to have missed something.
Oh well – it’s working. Thanks for letting me put this up here and for looking at it!