locked
ModalPopupExtender not on top after several action. RRS feed

  • Question

  • User-721356704 posted
    Hi Again;

    I used AJAX Control Toolkit v15.1 ModalPopupExtender control.
    It look good for a particular point in time. but when I begun to
    take the next step I got the error;

    Here the STEP to display the bug
    1.) Click "Show Checklistbox" button
    (at this time, the CheckBoxList show dynamically)
    2.) Click the items in the CheckListBox ascendingly (1, 2, 3, 4, 5),
    then descendingly, (5,4,3,2,1).
    (at this time, the image display)
    3.) Click "Show ModalPopupExtender" button

    Output:
    http://s30.postimg.org/5nsp242fl/tmp_25229_error_1819321094.png

    HTML:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script type ="text/javascript" >
    function CLBOneOnlyselection(chkclb) {
    var objchkList = chkclb.parentNode.parentNode.parentNode;
    var chkboxControls = objchkList.getElementsByTagName("input");
    for (var i = 0; i < chkboxControls.length; i++) {
    if (chkboxControls[i] != chkclb && chkclb.checked) {
    chkboxControls[i].checked = false;
    }
    }
    }
    </script>




    <script type="text/javascript" src="Scripts/jquery-1.9.1.js"></script>

    <style type ="text/css" >
    .modalBackground {
    background-color: gray;
    filter: alpha(opacity =70);
    opacity: 0.7;

    position :relative;
    z-index: 99; /*always on top*/

    }

    .modalPopup {
    background-color: #FFFFFF;
    border: 3px solid #0DA9D0;
    border-radius: 12px;
    padding: 0;
    width: 300px;

    }

    .modalPopup .header {
    background-color: #2FBDF1;
    height: 30px;
    color: white;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    }

    .modalPopup .body {
    min-height: 50px;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
    }

    .modalPopup .footer {
    padding: 6px;
    }
    .modalPopup .yes, .modalPopup .no {
    height:23px;
    color :white ;
    /*line-height:10;*/
    text-align:center;
    font-weight:bold;
    cursor:pointer;
    border-radius:4px;
    }
    .modalPopup .yes {
    background-color:#2FBDF1;
    border:1px solid #0DA9D0;

    }
    .modalPopup .no {
    background-color:#9F9F9F;
    border:1px solid #5C5C5C;

    }


    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager runat ="server" ></asp:ScriptManager>
    <asp:UpdatePanel runat ="server" >
    <ContentTemplate >
    <!-- popup modal -->
    <asp:Panel ID="pnlModalPanel" runat="server" Style="display: none" CssClass="modalPopup" align="center">
    <div class="header">Sample</div>
    <br></br>
    <div class="body">
    <asp:Label ID="Label1" runat ="server" Text ="Sample" Font-Underline ="true" Font-Size ="10px" ForeColor ="Blue" ></asp:Label> <br />
    <asp:TextBox ID="Txtsample" runat="server" ToolTip ="Type your folder name"> </asp:TextBox>

    <!-- <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate ="Txtsample"
    Display ="Static" ForeColor ="Red" ErrorMessage="*" SetFocusOnError ="true" ></asp:RequiredFieldValidator> -->
    </div><br/>
    <div class="footer " style="text-align: right">
    <asp:Button ID="btnok" runat="server" CssClass="yes" CausesValidation ="false" Text="OK" OnClick ="btnok_Click" />
    <asp:Button ID="btnClose" runat="server" CssClass="no " Text="Cancel" />
    </div>
    </asp:Panel>

    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="btnClose" TargetControlID="btnokdummy" PopupControlID="pnlModalPanel" BackgroundCssClass="modalBackground"></ajaxToolkit:ModalPopupExtender>

    <!--End of Popup modal -->

    <asp:Button ID ="BtnShowList" runat ="server" Text ="Show Checklistbox" OnClick ="BtnShowList_Click" />
    <asp:Button ID="BtnShowall" runat="server" Text ="Show ModalPopupExtender" OnClick ="BtnShowall_Click" />
    <asp:Button ID="btnokdummy" runat ="server" style="display :none " />
    <asp:Image ID="imgPreview" runat ="server" Height ="500px" Width ="500px"/>
    <asp:Label ID ="lbl1" runat ="server" ></asp:Label>

    <asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack ="true" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged">

    </asp:CheckBoxList>


    </ContentTemplate>

    </asp:UpdatePanel>

    </div>
    </form>
    </body>
    </html>


    CodeBehind:
    protected void Page_Load(object sender, EventArgs e)
    {
    //Checklistbox one selection only
    for (int i = 0; i < CheckBoxList1.Items.Count; i++)
    {
    CheckBoxList1.Items[i].Attributes.Add("onclick", "CLBOneOnlyselection(this)");
    }
    }



    protected void BtnShowall_Click(object sender, EventArgs e)
    {
    imgPreview.ImageUrl = this.ResolveClientUrl("~/sample.gif");
    lbl1.Text = "Hello";
    ModalPopupExtender1.Show();


    }

    protected void btnok_Click(object sender, EventArgs e)
    {
    imgPreview.ImageUrl = "";
    lbl1.Text = "";


    }

    protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e)
    {
    imgPreview.ImageUrl = this.ResolveClientUrl("~/Images/" + CheckBoxList1.SelectedValue + ".gif");
    }

    protected void BtnShowList_Click(object sender, EventArgs e)
    {
    List<string> ilist = new List<string>();
    ilist.Add("1");
    ilist.Add("2");
    ilist.Add("3");
    ilist.Add("4");
    ilist.Add("5");
    CheckBoxList1.DataSource =ilist;
    CheckBoxList1.DataBind();
    }


    Thanks..
    Sunday, March 6, 2016 10:19 AM

Answers

  • User2103319870 posted

    I just updated the code and suddendly I got the same ouput. Looklike z-index have no effect.

    I forgot to add !important to the css style. Try using the below updated css style

    .modalPopup {
                    background-color: #FFFFFF;
                    border: 3px solid #0DA9D0;
                    border-radius: 12px;
                    padding: 0;
                    width: 300px;
                    z-index: 10000 !important; /*Set a higher z-index value*/
                }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 7, 2016 2:16 AM

All replies

  • User2103319870 posted

    ModalPopupExtender not on top after several action.

    Try setting the a higher z-index value for modal popup

      .modalPopup {
                    background-color: #FFFFFF;
                    border: 3px solid #0DA9D0;
                    border-radius: 12px;
                    padding: 0;
                    width: 300px;
                    z-index: 10000; /*Set a higher z-index value*/
                }
    

    Sunday, March 6, 2016 8:28 PM
  • User-721356704 posted

    Hi thanks for response. I just updated the code and suddendly I got the same ouput. Looklike z-index have no effect.
    Sunday, March 6, 2016 11:16 PM
  • User2103319870 posted

    I just updated the code and suddendly I got the same ouput. Looklike z-index have no effect.

    I forgot to add !important to the css style. Try using the below updated css style

    .modalPopup {
                    background-color: #FFFFFF;
                    border: 3px solid #0DA9D0;
                    border-radius: 12px;
                    padding: 0;
                    width: 300px;
                    z-index: 10000 !important; /*Set a higher z-index value*/
                }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 7, 2016 2:16 AM
  • User-721356704 posted
    Thank you very much a2h, you save my day... Godbless
    Monday, March 7, 2016 2:47 AM