Question

我正在尝试从同一个webform调用多个模态弹出窗口，但我不想将它们全部写在同一个aspx文件中，所以这就是我考虑使用母版页的原因。

到目前为止，这是代码的一部分：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Trabajadores.master.cs" Inherits="Trabajadores" %>


    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <asp:ContentPlaceHolder ID="Modal" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </div>
    </div>
    <!-- Modal -->


                <ul class="nav nav-pills nav-stacked small">
                    <li><a href="~/Empresas/Trabajadores/Ventanas/Empresas.aspx" data-toggle="modal" data-target="#myModal">Empresas</a></li>
                    <li><a href="~/Empresas/Trabajadores/Ventanas/Obras.aspx" data-toggle="modal" data-target="#myModal">Obras</a></li>
                    <li><a href="~/Empresas/Trabajadores/Ventanas/Haberes.aspx" data-toggle="modal" data-target="#myModal">Haberes</a></li>
                    <li><a href="~/Empresas/Trabajadores/Ventanas/Descuentos.aspx" data-toggle="modal" data-target="#myModal">Descuentos</a></li>
                </ul>

这是模式弹出窗口之一：

<%@ Page Title="Haberes" Language="C#" MasterPageFile="~/Trabajadores.Master" AutoEventWireup="true" CodeFile="Haberes.aspx.cs" Inherits="Empresas_Trabajadores_Ventanas_Haberes" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="Modal" runat="server">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Login</h4>
                </div>
                <div class="modal-body">
                    <form>
                    <div class="form-group">
                        <label>Email address</label>
                        <input type="email" class="form-control" placeholder="Enter Email">
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" class="form-control" placeholder="Enter Password">
                    </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default">Submit</button>
                </div>

</asp:Content>

但它不起作用。但是，我想如果我使用一个母版页，它会重定向页面以打开模态弹出窗口，所以我想知道是否有办法打开多个模态弹出窗口而不重定向页面（所以也许我不应该使用materpage ，但ac＃function代替）。

Answer 1

你的模态弹出逻辑应该包含父<div>，它具有以下样式规则class="modal fade"。

在下面的示例中，我在Master页面中定义了两个不同的模式弹出窗口，然后我需要做的就是从子页面调用它们来调用$('#modalPopupID').modal('show');

母版页

%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="jqgrid_example.SiteMaster" %>

<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <title><%: Page.Title %> - My ASP.NET Application</title>
    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
<body>
    <form runat="server">
        <div id="body">
            <asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
            <asp:ContentPlaceHolder runat="server" ID="MainContent" />
        </div>
    </form>
    <div class="modal fade" tabindex="-1" role="dialog" id="modal1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal 1</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label>Email address</label>
                            <input type="email" class="form-control" placeholder="Enter Email">
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" class="form-control" placeholder="Enter Password">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default">Submit</button>
                </div>
            </div>
        </div>
    </div>
        <div class="modal fade" tabindex="-1" role="dialog" id="modal2">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal 2</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label>Email address</label>
                            <input type="email" class="form-control" placeholder="Enter Email">
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" class="form-control" placeholder="Enter Password">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default">Submit</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

子页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalPopupExample.aspx.cs" Inherits="jqgrid_example.ModalPopupExample" MasterPageFile="~/Site.Master" %>


<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
        $('#modal1').modal('show');
        //Or uncomment the line below to show the other modal popup
        //$('#modal2').modal('show');
        });
    </script>
</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
</asp:Content>

在asp.net和c＃中从webform调用多个模态弹出窗口

1 个答案: