Site icon Vineet Geek

Auto POP-UP on Website- Html code

Vineet Srivastav

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.

Exit mobile version