php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

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";



  1. Thank you so much for providing such a useful content. Digital Signature Certificate

  2. Thanks for sharing such great piece of information with us. Digital Signature Certificate

  3. I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people. Apply Class 3 Digital Signature Certificate

  4. Thanks for sharing such great piece of information with us. Class 2 Digital Signature Certificate

  5. I highly admire your post. Thanks for sharing such wonderful information, I see your post very often and share them on all social media channels.
    Digital Signature Certificate in Delhi

  6. Hey very cool site!! Man .. Excellent .. Amazing .. I'll bookmark your site and take the feeds also…I'm happy to find a lot of useful information here in the post, we need work out more strategies in this regard, thanks for sharing. Perfect Color Scheme for Your Website


More Posts