z-index not working with modal popup extender

Question

z-index not working with modal popup extender

527 Views Asked by Anurag At 28 March 2019 at 10:48

There is a background image above which a div is placed. Now there is a modalpopup of Sign in which should appear at the top of div on click. But it is somehow appearing under the div. Expected result from bottom to top background image then div and then popup. Here is what I am getting in image I provided: https://i.stack.imgur.com/eCD9z.png Expected result is popup should be at top

set z-index of div to 0 and 1. By default popup z-index is 10001 but still div is coming at top of it.

<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

Original Q&A

There are 1 best solutions below

**Anurag** · Answer 1 · 2019-03-29T05:03:39.653000

<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>

The answer is the first top most div tag should finish just above the modalpopupextender. Earlier it was finishing at the end of code. Thanks all for your help.

z-index not working with modal popup extender

There are 1 best solutions below

Related Questions in CSS

Related Questions in ASP.NET

Related Questions in MODALPOPUPEXTENDER

Trending Questions

Popular # Hahtags

Popular Questions