Home Carbon Ads wikiHow Style Popup

wikiHow Style Popup

wikihow

In this tutorial I will show you how to create a wikiHow style popup for your website. With just few lines of CSS and JavaScript you can create such kind of styles.

View Demo

When to Display?

wikiHow displays the popup after user has scrolled 85% of the webpage. Using this JavaScript snippet you can easily detect when user has scrolled 85% of the webpage

window.addEventListener("scroll", function(){
                var heightOfWindow = window.innerHeight;
                var contentScrolled = window.pageYOffset;
                var bodyHeight = window.document.getElementsByTagName("body")[0].offsetHeight;
                var total = bodyHeight - heightOfWindow;
                var got = contentScrolled;
                var scrolled = parseInt((got/total) * 100);
               
                if(scrolled > 85)
                {
                    //display popup
                }
            }, false);

To understand how the above code words please refer this article.

Styling the box

The popup box is displayed as fixed position. We get the balloon shape by making the border top left, top right and bottom left assigned to same pixel value but greater than zero. Border top right is assigned to 0px.

Here is the complete code of the demo.

<!doctype html>
<html>
    <head>
        <title>wikiHow Style Popup</title>
        <style>
            .popup-cover
            {
                right: -250px;
                bottom: -250px;
                position: fixed;
                margin-left: -10px;
                width: 250px;
                -webkit-transition: all 1s;
                -moz-transition: all 1s;
                -o-transition: all 1s;
                transition: all 1s;
            }
           
            .popup
            {
                background-color: white;
                border: 5px solid #93b874;
                border-right: none;
                border-bottom: none;
                border-radius: 150px 150px 0px 150px;
                height: 160px;
                margin-bottom: 0px;
                padding: 40px;
                text-align: center;
                clear: both;
            }
           
            .popup .close
            {
                font-size: 14px;
                position: relative;
                float: right;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div id="popup-cover" class="popup-cover">
            <div class="popup">
                <a class="close" href="javascript:popup_close();">&#10006;</a>
                <h3>QNimate</h3>
            </div>
        </div>
       
        <script>
            window.addEventListener("scroll", function(){
                var heightOfWindow = window.innerHeight;
                var contentScrolled = window.pageYOffset;
                var bodyHeight = window.document.getElementsByTagName("body")[0].offsetHeight;
                var total = bodyHeight - heightOfWindow;
                var got = contentScrolled;
                var scrolled = parseInt((got/total) * 100);
               
                if(scrolled > 85)
                {
                    document.getElementById("popup-cover").style.right = "0px";
                    document.getElementById("popup-cover").style.bottom = "-10px";
                }
                else
                {
                    document.getElementById("popup-cover").style.right = "-250px";
                    document.getElementById("popup-cover").style.bottom = "-250px";
                }
            }, false);

            function popup_close()
            {
                document.getElementById("popup-cover").style.right = "-250px";
                document.getElementById("popup-cover").style.bottom = "-250px";
                setTimeout(function(){document.getElementById("popup-cover").style.display = "none";}, 1000);
            }
        </script>
    </body>
</html>
Narayan Prusty
Database Design for AnalyticsLogin User into WordPress without Password

Leave a Reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago Web Development
Share this
Related Articles