locked
How to show calender extender on top of modal popup extender? RRS feed

  • Question

  • User314326733 posted

    I have used Ajax Modal popup extender for popup an the css for modal popup is as folows:

    .modalBackground
    {
        -webkit-border-radius: 12px 12px 23px 23px;
        border-radius: 12px 12px 23px 23px;
        -webkit-box-shadow: 12px 12px 12px 0 #946C10;
        box-shadow: 12px 12px 12px 0 #946C10;
        background-color: LightGrey;
        filter: alpha(opacity=80);
        opacity: 0.7;
        ; 
    }

    and the HTML for modal popup is as shown bellow:

    <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btncomplains"
                PopupControlID="panelstatus" BackgroundCssClass="modalBackground" CancelControlID="ImageCancel1">
            </cc1:ModalPopupExtender>

    <asp:Panel ID="panelstatus" GroupingText="Submit Details" BackColor="WhiteSmoke"
                Width="600px" runat="server" Style="border: thick solid #CCCCCC;">
                <div>
                    <div align="right" style="padding: 2px; width: auto; height: 25px;">
                        <asp:Image ID="ImageCancel1" runat="server" ImageUrl="~/images/close2.png" CssClass="image_hover"
                            Width="25px" />
                    </div>
                    <asp:UpdatePanel ID="UpdatePanelpopup1" runat="server">
                        <ContentTemplate>
                            <table style="width: 580px">
                                <tr>
                                    <td class="textalignment">
                                        <asp:Label ID="lblserialno" runat="server" Font-Bold="True" Text="Serial Number :"></asp:Label>
                                    </td>
                                    <td class="auto-style5">
                                        <asp:TextBox ID="txtserialno" runat="server" CssClass="textbox"></asp:TextBox>
                                    </td>
                                    <td class="tablealignmentcnlbtn">
                                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtserialno"
                                            ErrorMessage="Please Enter Serial No" ForeColor="#FF3300" ValidationGroup="process"
                                            Font-Size="Small"></asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="textalignment">
                                        <asp:Label ID="lblpinno" runat="server" Font-Bold="True" Text="Pin Number :"></asp:Label>
                                    </td>
                                    <td class="auto-style5">
                                        <asp:TextBox ID="txtpinno" runat="server" CssClass="textbox"></asp:TextBox>
                                    </td>
                                    <td class="tablealignment">
                                        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtpinno"
                                            ErrorMessage="Please Enter Pin No" ForeColor="#FF3300" ValidationGroup="process"
                                            Font-Size="Small"></asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="textalignment">
                                        <asp:Label ID="lbltransactionid" runat="server" Font-Bold="True" Text="Transaction ID :"></asp:Label>
                                    </td>
                                    <td class="auto-style5">
                                        <asp:TextBox ID="txttransactionid" runat="server" CssClass="textbox"></asp:TextBox>
                                    </td>
                                    <td>
                                        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txttransactionid"
                                            ErrorMessage="Please Enter TransactionId" ForeColor="#FF3300" ValidationGroup="process"
                                            Font-Size="Small"></asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="textalignment">
                                        <asp:Label ID="lblrechargedate" runat="server" Font-Bold="True" Text="Recharge Date :"></asp:Label>
                                    </td>
                                    <td class="auto-style5">
                                        <asp:TextBox ID="txtrechargedate" runat="server" CssClass="textbox"></asp:TextBox>
                                        <cc1:TextBoxWatermarkExtender ID="txtrechargedate_TextBoxWatermarkExtender" runat="server" TargetControlID="txtrechargedate"   WatermarkText="MM/DD/YYYY" WatermarkCssClass="watermark">
                                        </cc1:TextBoxWatermarkExtender>
                                        <cc1:FilteredTextBoxExtender ID="txtrechargedate_FilteredTextBoxExtender" runat="server"
                                            FilterType="Custom,Numbers" TargetControlID="txtrechargedate" ValidChars="/">
                                        </cc1:FilteredTextBoxExtender>
                                        <cc1:CalendarExtender ID="txtrechargedate_CalendarExtender" runat="server" Enabled="True"
                                            TargetControlID="txtrechargedate" PopupPosition="BottomLeft">
                                        </cc1:CalendarExtender>
                                        <td class="tablealignment">
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="txtrechargedate"
                                                ErrorMessage="*" Font-Size="Small" ForeColor="#FF3300" ValidationGroup="process"></asp:RequiredFieldValidator>
                                            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Please Enter Date In (MM/DD/YYYY) format"
                                                ControlToValidate="txtrechargedate" ForeColor="#FF3300" ValidationExpression="^((((0[13578])|([13578])|(1[02]))[\/](([1-9])|([0-2][0-9])|(3[01])))|(((0[469])|([469])|(11))[\/](([1-9])|([0-2][0-9])|(30)))|((2|02)[\/](([1-9])|([0-2][0-9]))))[\/]\d{4}$|^\d{4}$"
                                                ValidationGroup="process" Font-Size="Small"></asp:RegularExpressionValidator>
                                        </td>
                                </tr>
                                <tr>
                                    <td class="tablevalidation">
                                        &nbsp;
                                    </td>
                                    <td class="auto-style5">
                                        <asp:Button ID="btnpopsubmit" runat="server" CssClass="buttonsubmit" Font-Size="Medium"
                                            Height="40px" OnClick="btnpopsubmit_Click" Text="Submit" ValidationGroup="process"
                                            Width="100px" />
                                    </td>
                                    <td>
                                    </td>
                                </tr>
                            </table>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
                <%-- </div>--%>
            </asp:Panel>

    I have tried all sorts of z-index but nothing seem to have worked i have changed z-index from 0 to 99999999

    and nothing have changed and so i resorted to required field validators and watermark but pls help me to show that on top of modal popup and pls tell me if i am doing anything wrong

    I have also tried this script but didint worked:

    <script language="javascript" type="text/javascript">
             function onCalendarShown(sender,args)
             {  
                 alert(sender._popupBehavior._element.style.tostring());
                 sender._popupBehavior._element.style.zIndex=9999999;
                 
             }
             </script>

    pls help!!

    Monday, February 2, 2015 7:01 AM

Answers

  • User555306248 posted

    Please set the z-index for calendar when the calendar popups:

    Firstly, please declare OnClientShown and OnClientHidden event for Calendar:

     OnClientShown="onCalendarShown"  OnClientHidden="onCalendarHidden"

    You can make use of the below javascript code to define z-index for calendar. It will make sense

    function onCalendarShown(sender,args)
     {
            $find('calendarBehaviorId')._popupDiv.style.zIndex=10001;
     }
     function onCalendarHidden(sender,args)
     {
            $find('calendarBehaviorId')._popupDiv.style.zIndex=0;
     }

    Please refer to these two threads: http://forums.asp.net/p/1280547/2458840.aspx#2458840

    http://forums.asp.net/p/1401878/3047800.aspx#3047800

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 6, 2015 10:34 AM

All replies

  • User177399542 posted

    Hi parth I have created a demo application according to your code and it is working fine at my end. Might be ur css is conflicting with another properties. I your site is live post a link.

    or try this solution: http://stackoverflow.com/questions/8591014/calendar-extender-in-modal-popup-extender-asp-net-not-working

    Monday, February 2, 2015 7:54 AM
  • User314326733 posted

    No sir i dont have a live website because it is still developing but i can upload the whole css and html code if you want to check??

    thanks for reply pls tell then i will upload as it is confidential so i am asking?

    Monday, February 2, 2015 8:15 AM
  • User2008642861 posted

    Hi parth7253,

    Thank you for your post. From your code, I didn't find the TargetControlID of ModalPopupExtender, and many other parameters are not found. Is the code you give us complete? I suggest that you could refer to below link for more information about ModalPopupExtender.

    http://www.ajaxcontroltoolkit.com/ModalPopup/ModalPopup.aspx

    Also, here is an example for you to refer.

    http://forums.asp.net/t/1960812.aspx?How+to+use+ajax+modalpopupextender+control

    By the way, your script didn't work. But I am not clear about how you trigger this JavaScript. I supppose that you want to use this function as an event. As I know, JaveScript could not be used as an event. You could pass the parameters which is in the client-side.

    However, your issue is more related with AjaxControlToolkit, in our forum, we have a special part to discuss it.

    http://forums.asp.net/1022.aspx/1?ASP+NET+AJAX+Ajax+Control+Toolkit

    Hope this could be helpful to you.

    Best regards,

    Archer

    Tuesday, February 3, 2015 1:20 AM
  • User314326733 posted

    thank you sir for your reply the TargetControlID is there but i have not shown here sorry for that and the javascript that i have shown is is in comment in my project as i tried that code but didnt worked so i made it as comment and also removed the function where it was used.

    sir the popup is working fine but the problem is that the callender is not showing on top of modal popup and thats where i am helpless pls help me on that otherwise the code is good

    once again thank you for reply!!

    Tuesday, February 3, 2015 2:53 AM
  • User2008642861 posted

    Hi parth7253,

    Do you mean below code did not work?

    <ajaxToolkit:calendarextender id="txtrechargedate_CalendarExtender" runat="server" enabled="True"
                                                targetcontrolid="txtrechargedate" popupposition="BottomLeft">
                                        </ajaxToolkit:calendarextender>

    What's your meaning about "on top of modal popup extender"?

    As you see, your code has set it show at bottom left. Also, I didn't revise your code. Just add below code.

    <ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>

    Please check it.

    Best regards,

    Archer

    Tuesday, February 3, 2015 3:59 AM
  • User314326733 posted

    Sir I have Taken Script manager in Master page and the code works fine only problem is with the css so pls help on that and how did you manage to do it pl paste the whole css and code!!!

    Tuesday, February 3, 2015 5:11 AM
  • User177399542 posted

    Hi parth... it is clearly a CSS issue. Try lowering the Z-index of your modalbox. 

    I have already told you it is very difficult to provide you solution without all the css files....

    Tuesday, February 3, 2015 6:45 AM
  • User2008642861 posted

    Hi parth7253,

    It seems that you have not provided me to your whole code. Also, below is my test code.

     <title></title>
        <style type="text/css">
            .modalBackground {
                -webkit-border-radius: 12px 12px 23px 23px;
                border-radius: 12px 12px 23px 23px;
                -webkit-box-shadow: 12px 12px 12px 0 #946C10;
                box-shadow: 12px 12px 12px 0 #946C10;
                background-color: LightGrey;
                filter: alpha(opacity=80);
                opacity: 0.7;
                ;
            }
        </style>
        <script type="text/javascript">
            function onCalendarShown(sender, args) {
                alert(sender._popupBehavior._element.style.tostring());
                sender._popupBehavior._element.style.zIndex = 9999999;
    
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
                <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btncomplains"
                    PopupControlID="panelstatus" BackgroundCssClass="modalBackground" CancelControlID="ImageCancel1">
                </ajaxToolkit:ModalPopupExtender>
                <asp:Button ID="btncomplains" runat="server" Text="Button" />
                <asp:Panel ID="panelstatus" GroupingText="Submit Details" BackColor="WhiteSmoke"
                    Width="600px" runat="server" Style="border: thick solid #CCCCCC;">
                    <div>
                        <div align="right" style="padding: 2px; width: auto; height: 25px;">
                            <asp:Image ID="ImageCancel1" runat="server" ImageUrl="~/images/close2.png" CssClass="image_hover"
                                Width="25px" />
                        </div>
                        <asp:UpdatePanel ID="UpdatePanelpopup1" runat="server">
                            <ContentTemplate>
                                <table style="width: 580px">
                                    <tr>
                                        <td class="textalignment">
                                            <asp:Label ID="lblserialno" runat="server" Font-Bold="True" Text="Serial Number :"></asp:Label>
                                        </td>
                                        <td class="auto-style5">
                                            <asp:TextBox ID="txtserialno" runat="server" CssClass="textbox"></asp:TextBox>
                                        </td>
                                        <td class="tablealignmentcnlbtn">
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtserialno"
                                                ErrorMessage="Please Enter Serial No" ForeColor="#FF3300" ValidationGroup="process"
                                                Font-Size="Small"></asp:RequiredFieldValidator>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="textalignment">
                                            <asp:Label ID="lblpinno" runat="server" Font-Bold="True" Text="Pin Number :"></asp:Label>
                                        </td>
                                        <td class="auto-style5">
                                            <asp:TextBox ID="txtpinno" runat="server" CssClass="textbox"></asp:TextBox>
                                        </td>
                                        <td class="tablealignment">
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtpinno"
                                                ErrorMessage="Please Enter Pin No" ForeColor="#FF3300" ValidationGroup="process"
                                                Font-Size="Small"></asp:RequiredFieldValidator>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="textalignment">
                                            <asp:Label ID="lbltransactionid" runat="server" Font-Bold="True" Text="Transaction ID :"></asp:Label>
                                        </td>
                                        <td class="auto-style5">
                                            <asp:TextBox ID="txttransactionid" runat="server" CssClass="textbox"></asp:TextBox>
                                        </td>
                                        <td>
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txttransactionid"
                                                ErrorMessage="Please Enter TransactionId" ForeColor="#FF3300" ValidationGroup="process"
                                                Font-Size="Small"></asp:RequiredFieldValidator>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="textalignment">
                                            <asp:Label ID="lblrechargedate" runat="server" Font-Bold="True" Text="Recharge Date :"></asp:Label>
                                        </td>
                                        <td class="auto-style5">
                                            <asp:TextBox ID="txtrechargedate" runat="server" CssClass="textbox"></asp:TextBox>
                                            <ajaxToolkit:textboxwatermarkextender id="txtrechargedate_TextBoxWatermarkExtender" runat="server" targetcontrolid="txtrechargedate" watermarktext="MM/DD/YYYY" watermarkcssclass="watermark">
                                        </ajaxToolkit:textboxwatermarkextender>
                                            <ajaxToolkit:filteredtextboxextender id="txtrechargedate_FilteredTextBoxExtender" runat="server"
                                                filtertype="Custom,Numbers" targetcontrolid="txtrechargedate" validchars="/">
                                        </ajaxToolkit:filteredtextboxextender>
                                            <ajaxToolkit:calendarextender id="txtrechargedate_CalendarExtender" runat="server" enabled="True"
                                                targetcontrolid="txtrechargedate" popupposition="BottomLeft">
                                        </ajaxToolkit:calendarextender>
                                            <td class="tablealignment">
                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="txtrechargedate"
                                                    ErrorMessage="*" Font-Size="Small" ForeColor="#FF3300" ValidationGroup="process"></asp:RequiredFieldValidator>
                                                <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Please Enter Date In (MM/DD/YYYY) format"
                                                    ControlToValidate="txtrechargedate" ForeColor="#FF3300" ValidationExpression="^((((0[13578])|([13578])|(1[02]))[\/](([1-9])|([0-2][0-9])|(3[01])))|(((0[469])|([469])|(11))[\/](([1-9])|([0-2][0-9])|(30)))|((2|02)[\/](([1-9])|([0-2][0-9]))))[\/]\d{4}$|^\d{4}$"
                                                    ValidationGroup="process" Font-Size="Small"></asp:RegularExpressionValidator>
                                            </td>
                                    </tr>
                                    <tr>
                                        <td class="tablevalidation">&nbsp;
                                        </td>
                                        <td class="auto-style5">
                                            <asp:Button ID="btnpopsubmit" runat="server" CssClass="buttonsubmit" Font-Size="Medium"
                                                Height="40px" OnClick="btnpopsubmit_Click" Text="Submit" ValidationGroup="process"
                                                Width="100px" />
                                        </td>
                                        <td></td>
                                    </tr>
                                </table>
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </div>
                    <%-- </div>--%>
                </asp:Panel>
    
            </div>
        </form>
    </body>

    I did not revise any setting. So, it may caused by other reason.

    Best regards,

    Archer

    Thursday, February 5, 2015 3:46 AM
  • User555306248 posted

    Please set the z-index for calendar when the calendar popups:

    Firstly, please declare OnClientShown and OnClientHidden event for Calendar:

     OnClientShown="onCalendarShown"  OnClientHidden="onCalendarHidden"

    You can make use of the below javascript code to define z-index for calendar. It will make sense

    function onCalendarShown(sender,args)
     {
            $find('calendarBehaviorId')._popupDiv.style.zIndex=10001;
     }
     function onCalendarHidden(sender,args)
     {
            $find('calendarBehaviorId')._popupDiv.style.zIndex=0;
     }

    Please refer to these two threads: http://forums.asp.net/p/1280547/2458840.aspx#2458840

    http://forums.asp.net/p/1401878/3047800.aspx#3047800

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 6, 2015 10:34 AM