jquery - 简单模式不显示
ASP.NET 和 VB 的内容

Question

我在这里超出了我的知识范围。我只是想念的东西必须是完全明显的。我正在尝试使用 jQuery SimpleModal 来显示一条记录已添加到数据库的确认信息。

我已经设法弄清楚如何让模态显示；但是，仅显示模式的背景。div 中的内容实际上并未在模式中显示。实际上，模式中没有显示任何内容。

背景：

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

请参阅此屏幕截图以了解显示的内容： SimpleModal 的结果

这是我的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('&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;}

我已经尽我所能缩小范围，但没有任何运气。我可以尝试什么的任何想法？

score 0 · Accepted Answer

好吧，我想通了。完全愚蠢的东西。在使用教程时，当 Div 的 id 为 basic-modal-content 时，它一直将 #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)

让它工作。我不确定它在演示中是如何工作的，因为我一块一块地复制它，它在我这边不起作用。我不得不错过了什么。

哦，好吧 - 它正在工作。感谢您让我把它放在这里并查看它！

jquery - 简单模式不显示ASP.NET 和 VB 的内容

1 回答 1

Related

Reference

jquery - 简单模式不显示
ASP.NET 和 VB 的内容