{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/the-ultimate-guide-to-website-pop-ups/","result":{"data":{"markdownRemark":{"id":"b2c44ee4-a8be-5cea-a539-9c7ae8681c59","excerpt":"POPUPS! They can annoy you but if used properly, they can be a boon to any marketing campaign. In 2015, Taylor wrote an article on best practices to use popup…","html":"

POPUPS! They can annoy you but if used properly, they can be a boon to any marketing campaign. In 2015, Taylor wrote an article on best practices to use popup. While the article discussed how to optimize popup, in this article I am going to list down the types of articles and how you can implement them. I have added codes for every type of popup for a better idea.

\n

1. Creating a basic popup:

\n

\"Creating

\n

This section talks about creating a basic popup using simple HTML and CSS. There is a separate section for header, footer and content. I have also added a close button at top right corner of the popup. There are three steps to create this popup.

\n

A. Add HTML [manage a structure of a popup]

\n
<div class="popup-content">\n<span class="popup-close">×</span>\n<div class="popup-header">Header</div>\n<div class="popup-body">\n<p>Your popup code goes here</p>\n</div>\n<div class="popup-footer">Footer</div>\n</div>\n</div>\\
\n

B. Add CSS [Display Like a popup]

\n
<style>\n.popup-layout {\nposition: fixed;\nz-index: 1;\nleft: 0;\ntop: 0;\nwidth: 100% ;\nheight: 100% ;\noverflow: auto;\nbackground-color: rgb(0, 0, 0);\nbackground-color: rgba(0, 0, 0, 0.4);\n}\n.popup-header,\n.popup-footer{\nbackground: #29f;\npadding: 20px;\ncolor: #fff;\nfont-weight: bold;\n}\n.popup-body{\npadding: 20px;\n}\n.popup-content {\nbackground-color: #fefefe;\nmargin: 15% auto;\nborder: 1px solid #888;\nwidth: 60% ;\n}\n.popup-close {\ncolor: #FFF;\nmargin: 10px;\nfloat: right;\nfont-size: 28px;\nfont-weight: bold;\n}\n.popup-close:hover,\n.popup-close:focus {\ncolor: black;\ntext-decoration: none;\ncursor: pointer;\n}\n</style>
\n

Moreover, you can also check out this tutorial of creating a basic popup if you want to learn the basic understanding.

\n

C. Add Script [for action on close button]

\n
<script>\nvar popup\\_close = document.getElementsByClassName('popup-close');\nfor (var i = 0; i < popup\\_close.length; i++) {\nvar closeThis = popup\\_close\\[i\\];\ncloseThis.addEventListener("click", function () {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\n}, false);\n}\n</script>
\n

2. Creating a timer based popup:

\n

\"Creating

\n

This is a timer based popup which can be displayed at a certain time after the page is loaded.

\n

For reference, I have added the code to display the popup after 5 second [Add following code]. Steps are as below.

\n

Follow all the steps mentioned in section 1. (Creating a simple popup) and add the following code below that code.

\n
<script>\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\nsetTimeout(function () {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "block";\n}, 5000);\n</script>
\n

To Auto hide after 5 second, add following code.

\n
<script>\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "block";\nsetTimeout(function () {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\n}, 5000);\n</script>
\n

3. Creating a Scroll popup:

\n

This one shows up when you scroll down the page. I have set it to 500 pixels, you can change as per requirements

\n
<script>\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\nwindow.onscroll = function () {\nif (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "block";\n}\n}\n</script>
\n

4. Creating a Scroll / Time [5 second] popup:

\n

Pretty much the same as above but this one shows popup after 5 seconds of scrolling .

\n
<script>\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\nwindow.onscroll = function () {\nif (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {\nsetTimeout(function () {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "block";\n},5000 }\n}\n</script>
\n

5. Creating an Exit popup:

\n

\"Creating

\n

Only confirmation alert popup will show and you can’t make changes in html of this popup. Use following line of code on a single page.

\n
<script>\nwindow.onbeforeunload = function() {\nreturn "You are about to leave"\n}\n</script>
\n

There is another variation you can make here. In this scenario, if the user moves his cursor beyond the browser screen, you can create a popup to convince the user to stay. Below is the line of code you will need.

\n
<script>\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\ndocument.addEventListener("mouseout", function (event) {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "block";\n});\n</script>
\n

So guys, I hope this guide helped you through various types of popups. If you love animating your pop-up, you might want to check out this tutorial of creating an animated CSS pop-up. Do try them and let us know your experiences.

\n","headings":[{"value":"1. Creating a basic popup:","depth":3},{"value":"A. Add HTML [manage a structure of a popup]","depth":4},{"value":"B. Add CSS [Display Like a popup]","depth":4},{"value":"C. Add Script [for action on close button]","depth":4},{"value":"2. Creating a timer based popup:","depth":3},{"value":"3. Creating a Scroll popup:","depth":3},{"value":"4. Creating a Scroll / Time [5 second] popup:","depth":3},{"value":"5. Creating an Exit popup:","depth":3}],"fields":{"slug":"/engineering/the-ultimate-guide-to-website-pop-ups/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":null,"title":"Know The Types of Website Popups and How to Create Them","canonical":null,"date":"April 20, 2017","updated_date":null,"tags":["CSS"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/d404c01e7d4da26cf8ec6404c910921c/18e14/The-Ultimate-guide-to-website-pop-ups.webp","srcSet":"/static/d404c01e7d4da26cf8ec6404c910921c/1c9b5/The-Ultimate-guide-to-website-pop-ups.webp 200w,\n/static/d404c01e7d4da26cf8ec6404c910921c/f1752/The-Ultimate-guide-to-website-pop-ups.webp 400w,\n/static/d404c01e7d4da26cf8ec6404c910921c/18e14/The-Ultimate-guide-to-website-pop-ups.webp 560w","sizes":"(max-width: 560px) 100vw, 560px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","bio":"LoginRadius is a leading provider of cloud-based Customer Identity and Access Management (cIAM) platform.","avatar":null}}}},"pageContext":{"id":"b2c44ee4-a8be-5cea-a539-9c7ae8681c59","fields__slug":"/engineering/the-ultimate-guide-to-website-pop-ups/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}