堆棧內存溢出
  簡體   English   中英

z-index不使用模態彈出擴展器

[英]z-index not working with modal popup extender

 原文  2019-03-28 10:48:16  5   1    css/ asp.net/ modalpopupextender

問題描述

有一個背景圖像，上面放置一個div。 現在有一個登錄模式，它應該出現在點擊頂部的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

1 個解決方案

解決方案1
 0  2019-03-29 05:03:39

 <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上面完成。 早些時候，它在代碼結束時完成。 感謝你的幫助。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 z-index在彈出窗口中不起作用 負z-index在模態內不起作用 Twitter引導模式Z索引不起作用 Z-Index不起作用 Z-index不起作用 Z-index不起作用 Z索引“不起作用” Bootstrap 模態 z-index Firefox上的Z-index-Internet Explorer無法正常工作。 引導模態 地圖自動完成未以模態角度顯示。 z-index 不起作用
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM