Auto POP-UP on Website- Html code

Screenshot-2020-05-14-at-2.37.52-PM-3

There are many ways you can design a POP-UP. Many Plugins are available  in WordPress to do the same. But here we are not talking about the WordPress site, we are talking about Static sites. You just have to add some basic codes. The coding language used in this are Html, CSS, and Javascript.

First of all copy paste this code  index.html under <body> tag:

    <div id="boxes">
        <div id="dialog" class="window">
            <p> Here you can write your content!....</p>
            <div id="popupfoot"> <a href="#" class="close agree">close</a> </div>
        </div>
        <div id="mask"></div>
    </div>

Now, paste this code in style.css or under <style> tag:

#mask {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9000;
    background-color: #000000;
    display: none;
}
#boxes .window {
    position: absolute;
    left: 0;
    top: 0;
    width: 440px;
    height: 200px;
    display: none;
    z-index: 9999;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
}
#boxes #dialog {
    width: 750px;
    height: 300px;
    padding: 10px;
    background-color: #ffffff;
    font-family: 'Segoe UI Light', sans-serif;
    font-size: 15pt;
}
#popupfoot {
    font-size: 16pt;
    position: fixed;
    bottom: 600px;
    right: 0px;
}

Paste this Javascript code to index.html before</body> tag:

Before pasting this Javascript, Open a script tag type text/javascript. Like this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
    <script type="text/javascript">

Now, paste this code under script tag:

    <script type="text/javascript">
        $(document).ready(function() {
            var id = '#dialog';
            //Get the screen height and width
            var maskHeight = $(document).height();
            var maskWidth = $(window).width();
            //Set heigth and width to mask to fill up the whole screen
            $('#mask').css({
                'width': maskWidth,
                'height': maskHeight
            });
            //transition effect
            $('#mask').fadeIn(500);
            $('#mask').fadeTo("slow", 0.9);
            //Get the window height and width
            var winH = $(window).height();
            var winW = $(window).width();
            //Set the popup window to center
            $(id).css('top', winH / 2 - $(id).height() / 2);
            $(id).css('left', winW / 2 - $(id).width() / 2);
            //transition effect
            $(id).fadeIn(2000);
            //if close button is clicked
            $('.window .close').click(function(e) {
                //Cancel the link behavior
                e.preventDefault();
                $('#mask').hide();
                $('.window').hide();
            });
            //if mask is clicked
            $('#mask').click(function() {
                $(this).hide();
                $('.window').hide();
            });
        });

And you are done, Also don’t forget to close Javascript tag. Refresh your web page and you will find auto POP-UP. You can customise it as per your need if you know some basic knowledge of Css and Html. Hope this article helped you, Feel free to ask any question regarding this POP-UP. If you are facing any problem also let me know will try to solve it asap.


Vineet Srivastav is the founder of Vineet Geek. He is a tech blogger, developer and gadget freak.


Similar Articles

0 Comments

Leave a comment

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

2020 Vineet Geek | All Rights Reserved | Developed By Vineet Srivastav