Question

有一个背景图片，上面有一个div。现在有一个Sign的模式弹出窗口，单击该窗口应显示在div的顶部。但是它以某种方式出现在div下。从底部到顶部背景图像的预期结果，然后是div，然后是弹出窗口。这是我提供的图像中的内容： https://i.stack.imgur.com/eCD9z.png 预期结果是弹出窗口应该位于顶部

将div的z-index设置为0和1。默认情况下，弹出式z-index为10001，但div仍位于其顶部。

<style>
       body, html
       {
           height: 100%;
           margin: 0;
           font-family: Arial, Helvetica, sans-serif;
       }

       *
       {
           box-sizing: border-box;
       }

       .bg-image
       {
           /* The image used */
           background-image: url(./Images/Stadium.jpg); /* Add the blur effect */ /*filter: blur(4px);
           -webkit-filter: blur(4px); /* Full height */
           height: 400px; /* Center and scale the image nicely */
           background-position: center;
           background-repeat: no-repeat;
           background-size: cover;
       }

       /* Position text in the middle of the page/image */
       .bg-text
       {
           background-color: rgb(0,0,0); /* Fallback color */
           background-color: rgba(0,0,0, 0.8); /* Black w/opacity/see-through */
           color: white;
           font-weight: bold;
           border: 3px solid #f1f1f1;
           position: absolute;
           top: 40%;
           left: 50%;
           transform: translate(-50%, -50%);
           width: 60%;
           padding: 20px;
           text-align: center;
       }
   </style>

<div class="bg-image">
       </div>
       <div class="bg-text">
           <h2 style="font-variant: normal; font-family: Times New Roman; font-size: 1em; color: Black;
               margin: auto;">
               Find a Sports Coach</h2>
           <asp:TextBox ID="txtSport" Style="margin-top: 100px;" runat="server" Font-Size="1em"
               Font-Bold="false" onblur="Javascript:FormatSport();"></asp:TextBox>
           <asp:Button ID="btnSearch" runat="server" Style="margin-left: 15px; text-align: left;"
               Text="Find" ValidationGroup="searchJob" OnClick="btnSearch_Click" />
           <asp:TextBox ID="txtLoc" runat="server" Font-Size="1em" Font-Bold="false" placeholder="Bangalore"
               ToolTip="Locations" onblur="Javascript:FormatLocation();"></asp:TextBox>
       </div>

<div>
<asp:LinkButton ID="lnkSignIn" runat="server" Text="Sign in" ForeColor="Black" Style="float: right;"></asp:LinkButton>
               <cc1:ModalPopupExtender ID="mp2" BehaviorID="behaviorIDmp1" runat="server" PopupControlID="Panel2"
                   TargetControlID="lnkSignIn" CancelControlID="btnSignInCancel" DropShadow="true"
                   BackgroundCssClass="modalBackground">
               </cc1:ModalPopupExtender>
</div>
```[![Popup issue][1]][1]


 [1]: https://i.stack.imgur.com/eCD9z.png

Answer 1

<body style="background-color: #F7F9F4; max-width: 100%; overflow-y: auto;">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div style="background-color: White; position: fixed; width: 100%; height: 60px;">
        <br />
        <div style="float: left;" onclick="location.href='http://www.coachx.in'">
            <h1 style="font-family: @Comic Sans dMS, cursive, sans-serif; font-weight: 500; font-size: large;
                font-variant: normal; margin-left: 5px; letter-spacing: 1px; color: #043C61;
                text-align: left; vertical-align: top;">
                CoachX</h1>
        </div>
        <div style="display: inline; margin: auto; text-align: center;">
            <div style="text-align: center;">
                <asp:LinkButton ID="lnkApplyToCoach" runat="server" PostBackUrl Text="Register As A Coach"
                    ForeColor="Black" Style="margin-left: 10px; float: right; margin-right: 10px;"></asp:LinkButton>
            </div>
            <asp:LinkButton ID="lnkSignIn" runat="server" Text="Sign in" ForeColor="Black" Style="margin-left: 10px;
                float: right; margin-right: 10px;"></asp:LinkButton>
        </div>
    </div>
    <cc1:ModalPopupExtender ID="mp2" BehaviorID="behaviorIDmp1" runat="server" PopupControlID="Panel2"
        TargetControlID="lnkSignIn" CancelControlID="btnSignInCancel" DropShadow="true"
        BackgroundCssClass="modalBackground">
    </cc1:ModalPopupExtender>
    <asp:Panel ID="Panel2" runat="server" CssClass="modalPopup" align="center" Style="display: none;
        height: 230px; width: 300px;" DefaultButton="btnSignIn">
        <h1 style="font-variant: normal; font-family: Comic Sans MS; font-size: 1em; margin-left: 0px;
            margin-top: 0px; color: Gray;">
            Sign In</h1>
        <asp:TextBox ID="txtSignInEmail" runat="server" class="txtFirstName" MaxLength="100"
            Width="200px" name="email" TabIndex="3" value="" placeholder="email address"
            Style="margin-top: 15px;" /><br />
        <asp:Label runat="server" ID="lblError" ForeColor="Red" Visible="false" Text="Incorrect Email\Password"></asp:Label>
        <asp:RequiredFieldValidator EnableClientScript="true" ID="reqtxtSignInEmail" runat="server"
            ValidationGroup="modal" ForeColor="Red" ControlToValidate="txtSignInEmail" ErrorMessage="Email Address Required"
            Display="Dynamic" />
        <asp:RegularExpressionValidator ID="regtxtSignInEmail" runat="server" ErrorMessage="Not Valid Email ID"
            ValidationGroup="modal" Display="Dynamic" ControlToValidate="txtSignInEmail"
            ForeColor="Red" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
        </asp:RegularExpressionValidator>
        <asp:TextBox ID="txtSignInPassword" runat="server" TextMode="Password" Width="200px"
            placeholder="passowrd" class="txtFirstName" name="passwd" TabIndex="4" Style="margin-top: 15px;" /><br />
        <asp:RequiredFieldValidator EnableClientScript="true" ID="reqtxtSignInPassword" runat="server"
            ValidationGroup="modal" ControlToValidate="txtSignInPassword" ErrorMessage="Password Required"
            Display="Dynamic" Style="color: Red;" /><br />
        <asp:Button ID="btnSignIn" ValidationGroup="modal" class="btnempregsubmit" Width="100px"
            Height="25px" runat="server" Text="Log In" OnClick="btnSignIn_Click" CausesValidation="false"
            Style="clear: both;" />
        <br />
        <asp:HyperLink ID="btnSignInCancel" runat="server" Text="Cancel" CssClass="btnClosePopup">Close</asp:HyperLink>
    </asp:Panel>
    <div class="bg-image">
    </div>
    <div class="bg-text">
        <h1 style="font-variant: normal; font-family: Times New Roman; font-size: 2em; color: Black;
            margin: auto;">
            Find a Sports Coach</h1>
        <div style="margin-top: 30px;">
            <label style="float: left;">
                Search By Sport
            </label>
            <label style="float: right; margin-right: 120px;">
                Search By Location</label><br />
            <asp:TextBox ID="txtSport" Style="float: left; width: 220px; height: 30px; border-radius: 10px;
                background: White; padding: 15px;" runat="server" Font-Size="1.5em" Font-Bold="false"
                onblur="Javascript:FormatSport();"></asp:TextBox>
            <asp:TextBox ID="txtLoc" runat="server" Style="float: right; width: 250px; height: 30px;
                border-radius: 10px; background: White; padding: 15px;" Font-Size="1.5em" Font-Bold="false"
                placeholder="Bangalore" ToolTip="Locations" onblur="Javascript:FormatLocation();"></asp:TextBox>
        </div>
        <asp:Button ID="btnSearch" runat="server" Text="Search" ValidationGroup="searchJob"
            OnClick="btnSearch_Click" Style="clear: both; margin-top: 30px; border-radius: 10px;
            height: 40px; background: Green; padding: 10px; width: 200px; font-size: large;" />
    </div>

答案是第一个最上面的div标签应该在modalpopupextender之上完成。之前，它在代码末尾完成。谢谢大家的帮助。

z-index不适用于模式弹出扩展器

1 个答案: