forum

Home / DeveloperSection / Forums / Modal through HTML, CSS and JavaScript

Ask Question

Modal through HTML, CSS and JavaScript

Anonymous User33120-Jul-2021

What is Modal in webpage? How to make a Modal through HTML, CSS and JavaScript?

htmlhtml css-css3 
Updated on 20-Jul-2021
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Anonymous User

Anonymous User

04-Aug-2021

A modal is a pop up window created by the developer to capture the user's attraction to a particular subject or thing. A modal, also called a modal window or lightbox, is displayed in front of all other content on the webpage and it disables all actions of the website. The user is not able to go through any page without interacting with the modal. Modals are often used to draw users' attention to some important action or information on a website or an application.

Let's have a look on the below code : 

<!DOCTYPE html>

<html>

<head>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <style>

        body {

            font-family: Arial, Helvetica, sans-serif;

        }

        .modal {

            display: none; 

            position: fixed;

            z-index: 1; 

            padding-top: 100px; 

            left: 0;

            top: 0;

            width: 100%; 

            height: 100%; 

            overflow: auto; 

            background-color: rgb(0,0,0); 

            background-color: rgba(0,0,0,0.4);

        }

        .modal-content {

            background-color: #fefefe;

            margin: auto;

            padding: 20px;

            border: 1px solid #888;

            width: 80%;

        }

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

    <h2>Modal Example</h2>

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

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

        <div class='modal-content'>

            <span class='close'>&times;</span>

            <p>Some text in the Modal..</p>

        </div>

    </div>

    <script>

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

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

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

        btn.onclick = function () {

            modal.style.display = 'block';

        }

        span.onclick = function () {

            modal.style.display = 'none';

        }

        window.onclick = function (event) {

            if (event.target == modal) {

                modal.style.display = 'none';

            }

        }

    </script>

</body>

</html>

Hope this code will be helpful for you.

Happy Coding!

Liked By