locked
issue with select all (ctrl + a) in a modal popup. RRS feed

  • Question

  • User1721927739 posted

    Hi,

    When a modal popup is opened, I want to select(using Ctrl+ a) only the content present in the modal popup. 

    Currently the content behind the modal popup is also getting selected.

    I have tried the below methods:

    1. using  Jquery focus() method to focus on the panel of the modal popup.

    2. C# Focus() method to focus  on the panel of the modal popup.

    3. CSS opacity.

    The 2nd method works, but when the user clicks on anywhere on the modal popup the focus is lost and content behind the modal popup is getting selected.

    Please help me on this.

    Regards,

    Salman

    Tuesday, October 14, 2014 2:22 AM

Answers

  • User1918509225 posted

    Hi Salman KD,

    I have tested your code ,it also will select all the page content.

    It seems that you can not just select the modal popup, maybe you need to double click on the content or use the mouse to choose  all the modal content.

    Best Regards,

    Kevin Shen.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 16, 2014 4:41 AM

All replies

  • User1918509225 posted

    Hi Salman,

    For your issue, I created a demo with ModalPopupExtender.

    When I open the modal popup , then click on the modal popup.then I press ctrl +a ,it will select all the content of the modal popup.

    Here is my code :

       <form id="form1" runat="server">
        <div>
            <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
              <asp:Button ID="btnAddNew" runat="server" Text="New Expanse" />
            <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="btnCancel" 
                 OkControlID="btnOkay" TargetControlID="btnAddNew" 
                 PopupControlID="Panel1" BehaviorID="show" ></ajaxToolkit:ModalPopupExtender>
             <div class="popupConfirmation" id="Panel1" style="display: none">
                 this is test  this is test  this is test  this is test  this is test  this is test  this is test  this is test  this is test 
                  this is test  this is test  this is test  this is test 
            <div class="popup_Buttons">
                <input id="btnOkay" type="button" value="Speichern" />
                <input id="btnCancel" type="button" value="Abbrechen" />
              
            </div>
    
            </div>
        </div>
        </form>

    Best Regards,

    Kevin Shen.

    Tuesday, October 14, 2014 11:04 PM
  • User1721927739 posted

    Hi Kevin,

    Thanks for the reply. The solution you provided is not working for me. The content behind the modal popup is also getting selected.

    The methods which I have tried are as below:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .test
            {
                background-color: Gray;
                filter: alpha(opacity=70);
            }
        </style>
        <script src="../Scripts/jquery.js" type="text/javascript"></script>
        <script type="text/javascript" language="javascript">
            $(document).mousedown(function () {
                $('#<%=Panel1.ClientID %>').focus();
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
            </ajaxToolkit:ToolkitScriptManager>
            <asp:Button ID="btnAddNew" runat="server" Text="New Expanse" 
                onclick="btnAddNew_Click"/>
            <br />
            Content behind the modal popup
            <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="btnCancel"
                BackgroundCssClass="test" OkControlID="btnOkay" TargetControlID="btnAddNew" PopupControlID="Panel1"
                BehaviorID="show">
            </ajaxToolkit:ModalPopupExtender>
            <asp:Panel ID="Panel1" runat="server" style="background-color: #dee5ef; border: solid 1px Black;  display: none;">
                this is test this is test this is test this is test this is test this is test this
                is test this is test this is test this is test this is test this is test this is
                test
                <div class="popup_Buttons">
                    <input id="btnOkay" type="button" value="Speichern" />
                    <input id="btnCancel" type="button" value="Abbrechen" />
                </div>
            </asp:Panel>
        </div>
        </form>
    </body>
    </html>
    protected void btnAddNew_Click(object sender, EventArgs e)
    {
      Panel1.Focus();
    }
    
    

    Wednesday, October 15, 2014 5:22 AM
  • User1918509225 posted

    Hi Salman KD,

    I have tested your code ,it also will select all the page content.

    It seems that you can not just select the modal popup, maybe you need to double click on the content or use the mouse to choose  all the modal content.

    Best Regards,

    Kevin Shen.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 16, 2014 4:41 AM