PHP JavaScript: 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>
<html>

<head>
    <style>
        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:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>

<body>


<button id="myBtn">Open Modal</button>


<div id="myModal" class="modal">


<div class="modal-content">
<span class="close">×</span>
<div class="modal-text">
<p>Hello World! Fallow PHPJavascript.com.</p>
</div>
</div>

</div>

<script>
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 () {
modal.style.display = "block";
}

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

// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>

</body>
</html>
Result:

PHP JavaScript

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

No comments:

Post a Comment

Labels

Popular Posts