Share via

Setting a timer to display a popup after page finishes loading everything on it

Donald Symmons 3,026 Reputation points
2024-12-09T08:51:43.5533333+00:00

Hi,

I have a popup that shows when the page finishes loading. However, it pops up immediately the page comes up. Please how can I set a timer for the popup to show seconds after everything on the page is loaded?

I would like to achieve two things:

  1. Set timer for the popup to show
  2. Add some amination that will make the popup to ease in from top of page

Thank you.

Here is my full HTML, CSS and JavaScript

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, shrink-to-fit=no" />

    <link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
    <script src="https://ajax.googleapis.com/ajax//libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet" media="all" />
    <link href="css/bootstrap.css" rel="stylesheet" media="all" />
    <title>My Designs Page</title>
    <style type="text/css">
        .popup {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0);
            display: grid;
            place-content: center;
            opacity: 0;
            pointer-events: none;
            transition: 200ms ease-in-out opacity;
            z-index: 1!important;
        }
        .popup-content {
            width: 40vw;
            background-color: #fff;
            padding: 4rem;
            box-shadow: 0 0 .5em rgba(0, 0, 0, .5);
            border-radius: .5em;
            opacity: 0;
            transform: translateY(20%);
            transition: 300ms ease-in-out opacity
                        300ms ease-in-out transform;
            position: relative;
        }
        .popup label {
            position: absolute;
            top: 2rem;
            right: 2rem;
            cursor: pointer;
            background-color: #0b2436;
            color: #fff;
            user-select: none;
            border-radius: 2.0em;
            -moz-border-radius: 2.1em;
            -webkit-border-radius: 2.1em;
            font-weight: 500;
            line-height: 1.6em;
            margin: 0 auto;
            text-align: center;
            width: 1.6em;
        }
        .popup label:active {
            transform: scale(.9);
        }
        .showPopup {
            opacity: 1;
            transform: translateY(0);
            pointer-events: all;
        }
    </style>
</head>
<body style="font-family: 'Graphik', sans-serif; font-size: 10pt; font-weight: 400; line-height: 25.9375px; text-align: start;">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div class="wrapper">
            <div class="top" style="background-color: #f4fbfd; background-size: cover; background-repeat: no-repeat;">
                <div class="col-sm-4" style="color: #fff;">
                </div>
                 <div class="popup">
                    <div class="popup-content">
                        <label>X</label>
                        <p style="font-size: 10pt;">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </p>
                    </div>
                </div>
                <script>
                    const popup = document.querySelector('.popup');
                    const x = document.querySelector('.popup-content label')

                    window.addEventListener('load', () => {
                        setTimeout(
                            popup.classList.add('showPopup');
                            popup.childNodes[1].classList.add('showPopup');
                        )
                       4000
                    }) //I thought that setting timer here would do, but it appears not so

                    x.addEventListener('click', () => {
                        popup.classList.remove('showPopup');
                        popup.childNodes[1].classList.remove('showPopup');
                    })
                </script>
                <div class="top-child" style="width: 100%; color: #011b33;">
                    <br />
                    <div class="row col-sm-11" style="margin: 0 auto; width: 100%; padding: 6px; margin-bottom: 6%;">
                        <div class="col-sm-6" style="margin: 0 auto; padding: 6px;">
                            <div class="header-hero">
                                <br />
                                <h1 class="hero__heading">
                                    <span style="color: #145c7c;">Easy Brand Designs</span> for clothes
                                </h1>
                            </div>
                        </div>
                        <div class="col-sm-0" style="margin: 0 auto;"></div>
                        <div class="col-sm-6" style="margin: 0 auto; width: 100%; padding: 5px; border: none;">
                            <div class="img-gradient">
                                <img alt="document" src="images/homeimage.png" style="width: 100%; height: auto;" />
                            </div>
                        </div>
                    </div>
                    <br />
                </div>
            </div>
        </div>
    </form>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
    </body>
</html>
.NET
.NET
Microsoft Technologies based on the .NET software framework.
4,007 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,547 questions
0 comments
Accepted answer
  1. Lan Huang-MSFT 30,086 Reputation points Microsoft Vendor
    2024-12-09T10:17:10.06+00:00

    Hi @Donald Symmons,

    Set timer for the popup to show

    Modify the timer code as follows:

     <script>
     const popup = document.querySelector('.popup');
     const x = document.querySelector('.popup-content label');
     window.addEventListener('load', () => {
         setTimeout(() => {
             popup.classList.add('showPopup');
             popup.childNodes[1].classList.add('showPopup');
         }, 4000);
     }) //I thought that setting timer here would do, but it appears not so
     x.addEventListener('click', () => {
         popup.classList.remove('showPopup');
         popup.childNodes[1].classList.remove('showPopup');
     })
 </script>

    Add some amination that will make the popup to ease in from top of page

    Use the CSS below. You can change some specific values ​​according to your needs.

     .popup {
     position: absolute;
     animation-name: example;
     animation-duration: 10s;
     animation-delay: 2s;
     animation-fill-mode: both;
 }
 @keyframes example {
     from {
         top: -400px;
     }
     to {
         top: 0px;
     }
 }

    Best regards,
    Lan Huang

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.