Monday, June 1, 2015

setInterval(), setTimeout() Function in JavaScript

Open Popup Automatically After Few Seconds on the Webpage 

Requirement

I need to add a popup to my website where a user can Join my Facebook page. I need it to popup after a specific time when a user hits my site (15 seconds etc...).


You can download the code here: Expanse Example


The JavaScript code to perform this action is as follows:
The setInterval() function executes repeatedly on the web page after every specified time mentioned in the function. Here in the below code the ShowPopup() method will execute after every 5 seconds continuously till you are on the page. 

If you do not want to execute the ShowPopup() method again, clearInterval() method is used to stop the timer as declared in StopTimer() method. All this is done by declaring a global variable TimerVar.

    <script language="javascript" type="text/javascript">

               var TimerVar;

               function pageLoad() {

                   TimerVar = setInterval(function() { ShowPopup() }, 5000);

               }



               function ShowPopup() {

                   $find('modalpopup').show();

                   StopTimer();

               }

               function StopTimer() {

                   clearInterval(TimerVar);

               }

               function FacebookRedirect() {

                   window.open("http://www.facebook.com/LinesDots", "_blank");

               }

    </script> 


Write the following code on the web page.



        <form id="form1" runat="server">

    <div style="min-height: 700px;">

        <asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

        Please wait for 5 second for the Popup to display...

        <asp:Button ID="Button1" runat="server" Text="Click here to show the modal" Style="display: none" />

        <cc1:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="ModalPopupBG"

            BehaviorID="modalpopup" runat="server" CancelControlID="imgClose" OkControlID="btnOkay"

            TargetControlID="Button1" PopupControlID="Panel1" Drag="true" PopupDragHandleControlID="PopupHeader">

        </cc1:ModalPopupExtender>

        <div id="Panel1" style="display: none;" class="popupConfirmation">

            <div class="popup_Container">

                <div class="TitlebarRight">

                    <asp:Image ID="imgClose" ImageUrl="~/App_Themes/Default/Images/Close.jpg" runat="server" />

                </div>

                <div>

                    <p>

                        <asp:ImageButton Height="60px" Width="150px" ID="imgBtn" ImageUrl="~/App_Themes/Default/Images/FacebookJoin.jpg"

                            OnClientClick='FacebookRedirect(); return false;' runat="server" />

                    </p>

                </div>

                <div class="popup_Buttons" style="display: none">

                    <input id="btnOkay" value="Done" type="button" />

                    <input id="btnCancel" value="Cancel" type="button" />

                </div>

            </div>

        </div>

    </div>

    </form>

The CSS style defined on the page is as follows:

        <style type="text/css">

        body

        {

            background-color: #ECF5FB;

            background-image: url(Images/Stage_BG_btm.png);

            background-position: center bottom;

            background-repeat: repeat-x;

            font-family: Tahoma,Verdana,Segoe,sans-serif;

            font-size: 70%;

            padding-bottom: 20px;

        }

        .ModalPopupBG

        {

            background-color: #666699;

            filter: alpha(opacity=50);

            opacity: 0.7;

        }

        .popupConfirmation

        {

            width: 300px;

            height: 200px;

        }

        .popup_Container

        {

            background-color: #fffeb2;

            border: 2px solid #000000;

            padding: 0px 0px 0px 0px;

        }

        .popup_Buttons

        {

            margin: 10px;

        }

        .TitlebarRight

        {

            background-position: right;

            background-repeat: no-repeat;

            height: 16px;

            width: 16px;

            float: right;

            cursor: pointer;

            margin-right: 5px;

            margin-top: 5px;

        }

    </style>

No comments:

Post a Comment