Labels

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

<!-- 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 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:



6 comments:

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

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

    ReplyDelete
  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

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

    ReplyDelete
  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

    ReplyDelete

More Posts

FOLLOW