时间戳

首页 > 解决方案 > 为什么模板中的模态弹出窗口只显示在某些页面上？

javascript - 为什么模板中的模态弹出窗口只显示在某些页面上？

问题描述

目标：让模态弹出窗口在所有页面上工作（注意：它是在代码隐藏中完成的，因为我需要同时/在弹出窗口显示之前发生一些操作）

问题：我有一个模式弹出窗口，可以在一个页面上工作（使用 Site.Master 模板），但在另一页面上不起作用（使用 SiteValidation.Master 模板）模板看起来相同，但 javascript 引用放置在较低位置SiteValidation.Master 的 aspx——我不知道为什么作为编写此代码的开发人员不再与我们在一起

当用户单击复选框切换时，我正在从代码隐藏中调用模式

我试过的： 我试过调试，它到达了 ScriptManager.RegisterStartupScript 和 upModal.Update() 但弹出窗口没有显示在使用 SiteValidation.Master 的页面上我也尝试过移动 js 引用，但它没有help 我尝试切换备用页面以使用 Site.Master 而不是 SiteValidation.Master 但这会导致新问题

Site.Master：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Admin.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">       
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="xxxx-yyyyyy+zzzzzzz/aaaaa" crossorigin="anonymous">
        <link href="Content/admin.css" rel="stylesheet" />

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="xxxx-yyyyyy+zzzzzzz/aaaaa" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="xxxx-yyyyyy+zzzzzzz/aaaaa" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="xxxx-yyyyyy+zzzzzzz/aaaaa" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="xxxx-yyyyyy+zzzzzzz/aaaaa" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.10/js/gijgo.min.js" type="text/javascript"></script>
        <link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.10/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
    <body>
    <asp:CheckBox ID="chkOnOff12" runat="server" AutoPostBack="true" OnCheckedChanged="cbUpdateAvailability_Click"  />

    <div class="modal fade" id="availabilityModal" tabindex="-1" role="dialog" aria-labelledby="availabilityModal" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                        <asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                            <ContentTemplate>
                                <div class="modal-content">
                            <div class="modal-header">
                                <b style="text-align:center;">AVAILABILITY CHANGE</b>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        <p align="center">Are you sure you want to make <asp:Literal ID="ProfName" runat="server" /> <asp:Literal ID="availableTxt" runat="server" />?</p>
                                    </div>
                                </div>
                                <br />                          
                            </div>
                            <div class="modal-footer">
                                <div class="margin-center">
                                        <asp:Button ID="btnUpdateAvailability" AutoPostBack="true" runat="server" Text="Yes" CssClass="btn btn-green" ClientIDMode="Static" OnClick="btnUpdateAvailability_Click"/>
                                        <asp:Button ID="btnUpdateAvailabilityNo" AutoPostBack="true" runat="server" Text="No" CssClass="btn btn-secondary" ClientIDMode="Static"  OnClick="btnUpdateAvailability_Click"/>
                                </div>
                            </div>
                        </div>
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </div>
                </div>
            ...
    </body>
</html>

站点.Master.cs：

protected void cbUpdateAvailability_Click(object sender, EventArgs e)
        {
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "availabilityModal", "$('#availabilityModal').modal();", true);
        upModal.Update();
        }

SiteValidation.Master.cs：

protected void cbUpdateAvailability_Click(object sender, EventArgs e)
        {
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "availabilityModal", "$('#availabilityModal').modal();", true);
        upModal.Update();
        }

如何让模态弹出窗口也显示在使用 SiteValidation.Master 的页面上？

标签： javascriptc#asp.netbootstrap-modalregisterstartupscript

解决方案

推荐阅读