[Solved] Ajax ModalPopup Extender z-index not working in ASP.Net

Last Reply 8 months ago By anuragasr

Posted 8 months ago

There is a background image above which a div is placed having border and some textbox.

Now there is a modalpopup of sign in which should appear at the top of frame on click.

But it is somehow appearing under the div. I don't understand why.

https://i.stack.imgur.com/eCD9z.png

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

 

Posted 8 months ago

 

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