articles

Home / DeveloperSection / Articles / how to open first time popup on page load in website

how to open first time popup on page load in website

Anonymous User 12209 14-May-2018

Introduction:

In this article we are going to explain how to Show A Popup Only Once Per Visitor on your website with example.

Description:

Use jquery.firstVisitPopup.js plugin to open first time popup on your website.

The firstVisitPopup jQuery plugin which uses browser cookies to show up a modal popup (e.g. welcome modal) to first-time visitors.

Click here to download jquery.firstVisitPopup.js jQuery plugin

Now let’s see simple example:

<!DOCTYPE html>

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
    <script src="jquery.firstVisitPopup.js"></script>
    <script>
        $(function () {
            $('#my-welcome-message').firstVisitPopup({
                cookieName: 'homepag1e',
                showAgainSelector: '#show-message'
            });
        });
    </script>
</head>
<body>
    <div id="my-welcome-message">
        <h2>Welcome to my site</h2>
        <p>Hello, welcome to my website.</p>
    </div>
    <style>
        #fvpp-blackout {
            display: none;
            z-index: 499;
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: #000;
            opacity: 0.5;
        }
        #my-welcome-message {
            display: none;
            z-index: 500;
            position: fixed;
            width: 36%;
            left: 30%;
            top: 20%;
            padding: 20px 2%;
            font-family: Calibri, Arial, sans-serif;
            background: #FFF;
        }
        #fvpp-close {
            position: absolute;
            top: 10px;
            right: 20px;
            cursor: pointer;
        }
        #fvpp-dialog h2 {
            font-size: 2em;
            margin: 0;
        }
        #fvpp-dialog p {
            margin: 0;
        }
    </style>
</body>
</html>

Output:

how to open first time popup on page load in website 

I hope this article will help to you after reading.



Updated 26-Oct-2019
I am a content writter !

Leave Comment

Comments

Liked By