locked
ModalPopupExtender - show wait cursor outside of extender RRS feed

  • Question

  • User-1627226156 posted

    Hi, I am looking to show the wait cursor outside of the extender when the extender is shown until of course the extender is hidden.

    Can anyone please assist with this?

    Thank you, Timothy

    Monday, May 4, 2015 2:50 PM

Answers

  • User1996603829 posted

    Hi TimothyV,

    Thanks for your post.

    According to your description, you could change the cursor by setting cursor's css like this:

    cursor: wait

    The following sample is for your reference:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalPopup.aspx.cs" Inherits="TestAjax.ModalPopup" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
            body {
                font: normal 10pt/13pt Arial, Verdana, Helvetica, sans-serif;
                color: #666;
                margin: 20px;
            }
    
            .modalBackground {
                background-color: #000;
                filter: alpha(opacity=80);
                opacity: 0.8;
                cursor: wait;
            }
    
            .modalPopup-text {
                display: block;
                color: #000;
                background-color: #E6EEF7;
                text-align: center;
                border: solid 1px #73A2D6;
                padding: 10px;
            }
    
                .modalPopup-text input {
                    width: 75px;
                }
    
            .feedback {
                color: #00cc00;
                font-weight: 700;
            }
        </style>
        <script type="text/javascript">
    
            function onYes() {
    
                document.getElementById('Label1').innerText = 'Item deleted';
    
            }
    
            function onNo() {
    
                document.getElementById('Label1').innerText = 'Action canceled';
    
            }
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
    
            <asp:Panel ID="ConfirmtionPanel" runat="server" CssClass="modalPopup" Style="display: none">
    
                <div class="modalPopup-text">
                    Are you sure you want to delete this item?<br />
                    <br />
                    <asp:Button ID="YesButton" runat="server" Text="Yes" />&nbsp;&nbsp;
                    <asp:Button ID="NoButton" runat="server" Text="No" />
                </div>
            </asp:Panel>
    
            <asp:Button ID="DeleteButton" runat="server" Text="Delete Item" /><br />
    
            <asp:Label ID="Label1" runat="server" Text="" CssClass="feedback"></asp:Label>
    
            <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
                TargetControlID="DeleteButton"
                PopupControlID="ConfirmtionPanel"
                OkControlID="YesButton"
                OnOkScript="onYes()"
                CancelControlID="NoButton"
                OnCancelScript="onNo()"
                BackgroundCssClass="modalBackground">
            </cc1:ModalPopupExtender>
            <div>
            </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    Collina

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 29, 2015 3:08 AM

All replies

  • User177399542 posted

    Hi TimothyV you can check this article describing about how to show/hide multiple waiting images within update panel in asp .net. Hope this helps you.

    Monday, May 4, 2015 11:53 PM
  • User-1627226156 posted

    anuj_koundal, thank you for your reply in regards to an animated image while processing. I simply want to change the cursor from pointer to wait if the mouse is moved outside of the ModalPopupExtender.

    Are you please able to assist with this?

    Tuesday, May 5, 2015 9:07 AM
  • User1996603829 posted

    Hi TimothyV,

    Thanks for your post.

    According to your description, you could change the cursor by setting cursor's css like this:

    cursor: wait

    The following sample is for your reference:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalPopup.aspx.cs" Inherits="TestAjax.ModalPopup" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
            body {
                font: normal 10pt/13pt Arial, Verdana, Helvetica, sans-serif;
                color: #666;
                margin: 20px;
            }
    
            .modalBackground {
                background-color: #000;
                filter: alpha(opacity=80);
                opacity: 0.8;
                cursor: wait;
            }
    
            .modalPopup-text {
                display: block;
                color: #000;
                background-color: #E6EEF7;
                text-align: center;
                border: solid 1px #73A2D6;
                padding: 10px;
            }
    
                .modalPopup-text input {
                    width: 75px;
                }
    
            .feedback {
                color: #00cc00;
                font-weight: 700;
            }
        </style>
        <script type="text/javascript">
    
            function onYes() {
    
                document.getElementById('Label1').innerText = 'Item deleted';
    
            }
    
            function onNo() {
    
                document.getElementById('Label1').innerText = 'Action canceled';
    
            }
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
    
            <asp:Panel ID="ConfirmtionPanel" runat="server" CssClass="modalPopup" Style="display: none">
    
                <div class="modalPopup-text">
                    Are you sure you want to delete this item?<br />
                    <br />
                    <asp:Button ID="YesButton" runat="server" Text="Yes" />&nbsp;&nbsp;
                    <asp:Button ID="NoButton" runat="server" Text="No" />
                </div>
            </asp:Panel>
    
            <asp:Button ID="DeleteButton" runat="server" Text="Delete Item" /><br />
    
            <asp:Label ID="Label1" runat="server" Text="" CssClass="feedback"></asp:Label>
    
            <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
                TargetControlID="DeleteButton"
                PopupControlID="ConfirmtionPanel"
                OkControlID="YesButton"
                OnOkScript="onYes()"
                CancelControlID="NoButton"
                OnCancelScript="onNo()"
                BackgroundCssClass="modalBackground">
            </cc1:ModalPopupExtender>
            <div>
            </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    Collina

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 29, 2015 3:08 AM
  • User-1627226156 posted

    Collina,

    Thank yo so much. I will give it a try!

    All the best!

    Sunday, May 31, 2015 4:46 PM