Subscribe For Free

Monday, February 26, 2018

How To Create a Modal Popup Box with HTML, CSS and JavaScript ?

Making a popup is an exceptionally basic expansion to any site page. In this instructional exercise, I will demonstrate to you industry standards to make a popup utilizing essential HTML, Javascript and CSS. You can trigger popup on every time for example mouseover or keypress.

Here is the CSS code, place it in your head section of HTML code.
 <!DOCTYPE html>
        button {
            background-color: #ff7600; 
            border: none;
            color: black;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;

        body {
            margin: auto;
            width: 100%;
            padding: 10%;

        .modal {
            display: none; 
            position: fixed; 
            z-index: 1; 
            padding-top: 10%;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;

        .modal-content {
            background-color: #00ffff;
            margin: auto;
            padding: 20px;
            width: 50%;
            height: 30%;
            box-shadow: 3px 5px #88888882;

        .modal-text {
            padding: 80px;
            font-size: 22px;

        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;

        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;

<!-- Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
        <span class="close">&times;</span>
        <div class="modal-text">
            <p>Hello World! Fallow</p>


var modal = document.getElementById('myModal');

var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function () { = "block";

// When the user clicks on <span> (x), close the modal
span.onclick = function () { = "none";

// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if ( == modal) { = "none";


No comments:

Post a Comment

click it