{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/simple-popup-tutorial/","result":{"data":{"markdownRemark":{"id":"1cf9eebb-5427-583d-ba55-f103e54c627c","excerpt":"Creating a popup is a very simple addition to any webpage. In this tutorial, I will show you how to create a popup using basic Html, javascript and CSS. The…","html":"

Creating a popup is a very simple addition to any webpage. In this tutorial, I will show you how to create a popup using basic Html, javascript and CSS. The first thing we want to think about is what we want to do to trigger a popup. You can trigger an event on almost anything such as a button, link or keypress. In this tutorial, we will be clicking on a button to trigger a popup.

\n

What you will need:

\n\n

Let’s start building the popup

\n
<html>\n<head>\n  <title>A Simple Popup</title>\n</head>\n<body>\n<div id="maincontent">\n    <h1>Page Content<h2>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n    <div class="popupcontent">\n        <h1>Some Popup Content</h1>\n    </div>\n</div>\n</body>\n</html>
\n

We’ve created a div with id overlay to cover all the page content when the popup is displayed. This forces the user to close the popup before returning to the page content and also creates a nice user experience. The div with id popup will be our popup containing controls at the top to close the popup and our content area. Currently, this popup has no content and no styling so nothing will show. Let's add some styling next.

\n
<html>\n<head>\n  <title>A Simple Popup</title>\n  <style>\n    #overlay {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        background: #999;\n        width: 100%;\n        height: 100%;\n        opacity: 0.8;\n        z-index: 100;\n    }\n\n    #popup {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        background: #fff;\n        width: 500px;\n        height: 500px;\n        margin-left: -250px; /*Half the value of width to center div*/\n        margin-top: -250px; /*Half the value of height to center div*/\n        z-index: 200;\n    }\n  </style>\n</head>\n<body>\n<div id="maincontent">\n    <h1>Page Content<h2>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n    <div class="popupcontent">\n        <h1>Some Popup Content</h1>\n    </div>\n</div>\n</body>\n</html>
\n

We’ve now added some CSS for the overlay and the popup. At this point, we can see a white box above our grey overlay. We’ve added an h1 tag inside our popup a page title and some main page content. We should now see something like this:

\n

\"popup-example-01\"

\n

Next let's add a control to close this popup. We’ll add a span containing an X that we can click on to close this popup and JavaScript to handle this event.

\n
<html>\n<head>\n  <title>A Simple Popup</title>\n  <style>\n    #overlay {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        background: #999;\n        width: 100%;\n        height: 100%;\n        opacity: 0.8;\n        z-index: 100;\n    }\n\n    #popup {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        background: #fff;\n        width: 500px;\n        height: 500px;\n        margin-left: -250px; /*Half the value of width to center div*/\n        margin-top: -250px; /*Half the value of height to center div*/\n        z-index: 200;\n    }\n\n    #popupclose {\n        float: right;\n        padding: 10px;\n        cursor: pointer;\n    }\n  </style>\n</head>\n<body>\n<div id="maincontent">\n    <h1>Page Content<h2>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n    <div class="popupcontrols">\n        <span id="popupclose">X</span>\n    </div>\n    <div class="popupcontent">\n        <h1>Some Popup Content</h1>\n    </div>\n</div>\n<script type="text/javascript">\n    // Initialize Variables\n    var closePopup = document.getElementById("popupclose");\n    var overlay = document.getElementById("overlay");\n    var popup = document.getElementById("popup");\n \n    // Close Popup Event\n    closePopup.onclick = function() {\n        overlay.style.display = 'none';\n        popup.style.display = 'none';\n    };\n</script>\n</body>\n</html>
\n

Now we can close this popup…. Ah, that’s nice. Here we’ve added our X to click on, some CSS to style this close area. Also, we’ve added the javascript to handle the click event to hide the popup. Save your file as index.html and open it in your browser to test closing the popup. You’ll notice that the popup is displayed when we first open the page. Let's hide this with CSS on load so that we have to do something to open it.

\n
#overlay {\n    display: none;\n    ...\n}\n \n#popup {\n    display: none;\n    ...\n}
\n

After adding display: none; to our overlay and popup, you’ll notice that when you load the page in your browser we cannot see them. To show this popup we’ll have to do something, so let’s make a button to click on and some JavaScript to handle this event.

\n
<html>\n<head>\n  <title>A Simple Popup</title>\n  <style>\n\t#overlay {\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\tbackground: #999;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\topacity: 0.8;\n\t\tz-index: 100;\n\t}\n\n\t#popup {\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\tbackground: #fff;\n\t\twidth: 500px;\n\t\theight: 500px;\n\t\tmargin-left: -250px; /*Half the value of width to center div*/\n\t\tmargin-top: -250px; /*Half the value of height to center div*/\n\t\tz-index: 200;\n\t}\n\n\t#popupclose {\n\t\tfloat: right;\n\t\tpadding: 10px;\n\t\tcursor: pointer;\n\t}\n\n\t.popupcontent {\n\t\tpadding: 10px;\n\t}\n\n\t#button {\n\t\tcursor: pointer;\n\t}\n  </style>\n</head>\n<body>\n<div id="maincontent">\n    <h1>Page Content<h2>\n    <button id="button">Show Popup</button>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n    <div class="popupcontrols">\n        <span id="popupclose">X</span>\n    </div>\n    <div class="popupcontent">\n        <h1>Some Popup Content</h1>\n    </div>\n</div>\n<script type="text/javascript">\n\t// Initialize Variables\n\tvar closePopup = document.getElementById("popupclose");\n\tvar overlay = document.getElementById("overlay");\n\tvar popup = document.getElementById("popup");\n\tvar button = document.getElementById("button");\n\t// Close Popup Event\n\tclosePopup.onclick = function() {\n\t  overlay.style.display = 'none';\n\t  popup.style.display = 'none';\n\t};\n\t// Show Overlay and Popup\n\tbutton.onclick = function() {\n\t  overlay.style.display = 'block';\n\t  popup.style.display = 'block';\n\t}\n</script>\n</body>\n</html>
\n

We’ve added a button in our main content area. To show the popup we’ve added a JavaScript function to change the overlay and our popup to display:block; on event onclick. After making these changes click on your button to open your popup.

\n

Demo:

\n

See the Pen OPmQMP by Zoie Carnegie (@zoie-loginradius) on CodePen.

\n

Please post your questions or feedback in the comment area.

\n","headings":[],"fields":{"slug":"/engineering/simple-popup-tutorial/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":null,"title":"A Simple Popup Tutorial","canonical":null,"date":"January 05, 2015","updated_date":null,"tags":["HTML","CSS","UI"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/c6bf325c9c408389282535e3a446b575/2ad7f/simplepop.webp","srcSet":"/static/c6bf325c9c408389282535e3a446b575/1c9b5/simplepop.webp 200w,\n/static/c6bf325c9c408389282535e3a446b575/f1752/simplepop.webp 400w,\n/static/c6bf325c9c408389282535e3a446b575/2ad7f/simplepop.webp 800w,\n/static/c6bf325c9c408389282535e3a446b575/b13b4/simplepop.webp 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Zoie Carnegie","github":null,"bio":"Graduated from NAIT Digital Media and IT specializing in application development. PHP is my favorite language. I am a continuous learner always trying new languages, applications, frameworks. Passions are Programming, Photography and Travel.","avatar":null}}}},"pageContext":{"id":"1cf9eebb-5427-583d-ba55-f103e54c627c","fields__slug":"/engineering/simple-popup-tutorial/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}