We help IT Professionals succeed at work.

How to have a  modal pop up appear N seconds after page load

davnhm
davnhm asked
on
Medium Priority
327 Views
Last Modified: 2012-03-16
Hi

I am trying to deploy a modal pop up in a .net page. I have succeeded in firing it from the page load event. But I really want it to appear, say, 5 seconds after the page has loaded.

How can I do this?

Here is how I am calling the pop up in code.

        If Page.IsPostBack = False Then
            LoadPopup()
        End If

   Protected Sub LoadPopup()
        mpe_Demo1.Show()
    End Sub

 <asp:Panel ID="p_MainContent" runat="server" CssClass="modalPopup"  >
            <div>
                <p>
                    Content goes in this panel</p>
                <asp:Button ID="btnOk" runat="server" Text="Ok" OnClick="Ok" />
                <asp:Button ID="btnCancel" runat="server" OnClick="Cancel" Text="Cancel" />
            </div>
        </asp:Panel>
        <asp:LinkButton ID="lnk_None" runat="server" Text="click" />
        <%--      --%>
        <cc1:ModalPopupExtender ID="mpe_Demo1" runat="server" TargetControlID="lnk_None"
            PopupControlID="p_MainContent" BackgroundCssClass="modalBackground" />
Comment
Watch Question

Craig WagnerSoftware Architect
CERTIFIED EXPERT

Commented:
You'd really be better served looking at a client-side technology to accomplish this. I'd suggested taking a look at jQuery and jQuery UI. In the $(document).ready() method you could start a timer and then open a jQuery UI modal dialog when the timer expires.
as CraigWarner suggested a client side script is should be used, the function you want in javascript is setTimeout. The first parameter is the function to perform when the timer expires and the second parameter is the number of milliseconds before running the function/method in the first parameter.

so for example if you were using jquery to display it you could do something like this

function show_dialog()
{
    $(".modalPopup").dialog({
                  height: 350, //modify here for your popups height
                        width: 3450, //modify here for your popups width
                  modal: true
            });
}

$(function() {
       setTimeout("show_dialog()",5000);
});

Author

Commented:
Helpful

Explore More ContentExplore courses, solutions, and other research materials related to this topic.