Question

我不知道这里。它必须是一个完全明显的东西，我只是缺少。我正在尝试使用jQuery SimpleModal来显示已将记录添加到数据库的确认。

我已经设法弄清楚如何显示模态;但是，只显示模态的背景。 div中的内容实际上并未显示在模态中。事实上，模态中没有任何东西显示出来。

背景：

我使用母版页和默认的ASP.NET css站点设置。我已经禁用了网站css（正如你从屏幕截图中看到的那样）并且只使用了simplemodal中的css。我不能为我的生活得到它来展示内容。

请参阅此屏幕截图，了解显示的内容： Result of SimpleModal

这是我的aspx：

`＆lt;％@ Page Title =“”Language =“VB”MasterPageFile =“〜/ Site.master”AutoEventWireup =“false” CodeFile =“CreateDocType.aspx.vb”Inherits =“Admin_CreateDocType”％＆gt;

<%@ 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('&lt;p&gt;&lt;b&gt;HTML&lt;/b&gt; elements&lt;/p&gt;'); // HTML</code></p>
            <p><code>$('&lt;div&gt;&lt;/div&gt;').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>`

这是背后的代码：

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

和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;}

我已经尽了一切努力来缩小这一点而没有任何运气。对于我可以尝试的任何想法？

Answer 1

好吧我明白了。完全愚蠢的东西。在使用教程时，当Div具有基本模态内容的id时，它会将#basicModalContent列为选择器。

所以在我的RegisterStartupScript行中：

ScriptManager.RegisterStartupScript(Me.Page, GetType(String), "ShowSuccess", "$('#basicModalContent').modal();", True)

#basicModalContent不正确。问题是选择器必须匹配div id。将行更改为：

ScriptManager.RegisterStartupScript(Me.Page, GetType(String), "ShowSuccess", "$('#basic-modal-content').modal();", True)

让它发挥作用。我不确定它是如何在演示中工作的，因为我逐个复制了它并且它并不适合我。我不得不错过了什么。

哦，好吧 - 它正在工作。谢谢你让我把它放在这里并观察它！

simplemodal不显示ASP.NET和VB <div>的<div>内容

1 个答案: