Modal With HTML, CSS and Pure Javascript

HTML

CSS

Output

HTML Copied

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal With HTML, CSS and Pure Javascript</title>
</head>

<body>
    
   <div class="mainDivArea">
        <div class="clickableBtn">
            <a href="javascript:void(0)" class="modalCommonCls" modalAttr="deleteModal">
                Click me to open modal
            </a>
        </div>
   </div>

<div class="modalWithOverlayDiv" id="deleteModal">
        <div class="modal-overlay-div-area"></div>
        <div class="ModalMainDiv">
            <div class="modal-content-div">
                <img src="https://www.teknowize.com/front-assets/images/logo/logo.png" alt="teknowize" class="modalWarnigImg">
                <h5>Is Teknowize help you to learn technologies?</h5>
                <div>
                    <a href="#">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M14.8303 4.89014L16.1703 5.83014L10.3603 14.2101H9.02027L5.78027 9.67014L7.12027 8.42014L9.69027 10.8201L14.8303 4.89014Z" fill="#9D2B2B" />
                        </svg>
                        &nbsp;&nbsp;Yes
                    </a>
                    <a href="javascript:void(0)" class="modalCommonCloseBtn">
                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M3.43095 3.43144C3.64192 3.22053 3.92801 3.10205 4.22632 3.10205C4.52463 3.10205 4.81073 3.22053 5.0217 3.43144L8.9997 7.40944L12.9777 3.43144C13.1899 3.22651 13.4741 3.11311 13.769 3.11568C14.064 3.11824 14.3462 3.23656 14.5547 3.44514C14.7633 3.65372 14.8816 3.93589 14.8842 4.23086C14.8868 4.52583 14.7734 4.81001 14.5684 5.02219L10.5904 9.00019L14.5684 12.9782C14.7734 13.1904 14.8868 13.4745 14.8842 13.7695C14.8816 14.0645 14.7633 14.3466 14.5547 14.5552C14.3462 14.7638 14.064 14.8821 13.769 14.8847C13.4741 14.8873 13.1899 14.7739 12.9777 14.5689L8.9997 10.5909L5.0217 14.5689C4.80952 14.7739 4.52534 14.8873 4.23037 14.8847C3.9354 14.8821 3.65324 14.7638 3.44465 14.5552C3.23607 14.3466 3.11775 14.0645 3.11519 13.7695C3.11263 13.4745 3.22602 13.1904 3.43095 12.9782L7.40895 9.00019L3.43095 5.02219C3.22004 4.81122 3.10156 4.52512 3.10156 4.22681C3.10156 3.9285 3.22004 3.6424 3.43095 3.43144V3.43144Z" fill="#0E6651" />
                        </svg>
                        &nbsp;&nbsp;No
                    </a>
                    <img src="https://www.teknowize.com/attachments/file_1667419566.svg" alt="close" class="modal-close-btn modalCommonCloseBtn">
                </div>

</div>
        </div>
    </div>

</body>

</html>

CSS Copied

.mainDivArea{
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.clickableBtn a {
            text-decoration: none;
            height: 38px;
            background: #FFF;
            border: 1.5px solid #9D2B2B;
            border-radius: 50px;
            font-family: Roboto, sans-serif !important;
            font-weight: 600;
            font-size: 16px;
            text-align: center;
            color: #9D2B2B;
            padding: 7px 30px;
        }

.modalWithOverlayDiv {
            display: none;
        }

.ModalMainDiv {
            position: fixed !important;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            max-width: 525px;
            text-align: center;
        }

.modal-content-div {
            background: #FFF;
            border-radius: 14px;
            padding: 60px;
            position: relative;
        }

.modal-content-div h5 {
            font-family: Roboto, sans-serif !important;
            font-weight: 600;
            font-size: 24px;
            color: #000000;
            margin-top: 10px;
            margin-bottom: 40px;
        }

.modal-content-div .modalWarnigImg {
            max-width: 300px;
            height: auto;
        }

.modal-content-div div a svg {
            width: 20px;
            height: 20px;
        }

.modal-content-div div {
            display: flex;
            justify-content: center;
            align-items: center;
        }

.modal-content-div div a {
            text-decoration: none;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50px;
            height: 40px;
            padding: 0 48px;
            font-family: Roboto, sans-serif !important;
            font-weight: 600;
            font-size: 18px;
        }

.modal-content-div div a:first-child {
            border: 1px solid #9D2B2B;
            color: #9D2B2B;
            margin-right: 12.5px;
        }

.modal-content-div div a:first-child:hover {
            border: 1px solid #9D2B2B;
            background: #9D2B2B;
            color: #fff;
        }

.modal-content-div div a:first-child:hover svg path {
            fill: #fff;
        }

.modal-content-div div a:nth-child(2) {
            border: 1px solid #0E6651;
            color: #0E6651;
            margin-left: 12.5px;
        }

.modal-content-div div a:nth-child(2):hover {
            border: 1px solid #0E6651;
            background: #0E6651;
            color: #fff;
        }

.modal-content-div div a:nth-child(2):hover svg path {
            fill: #fff;
        }

.modal-overlay-div-area {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #000000;
            opacity: 0.2;
            top: 0;
            left: 0;
            z-index: 2;
        }

.modal-content-div .modal-close-btn {
            height: 20px;
            width: 20px;
            position: absolute;
            right: 15px;
            top: 15px;
            cursor: pointer;
        }

@media (max-width:442px) {
            .ModalMainDiv {
                max-width: 95% !important;
            }
        }

JS Copied

// Modal Close and Open start
        var modalCloseBtn = document.querySelectorAll('.modalCommonCloseBtn');
        modalCloseBtn.forEach(function (eachModalCloseBtn) {
            eachModalCloseBtn.addEventListener('click', function (event) {
                this.parentElement.parentElement.parentElement.parentElement.style.display = 'none'
                this.parentElement.parentElement.parentElement.parentElement.style.display = 'none'
                document.querySelector('html').style.overflow = "unset"
            });
        })
        var modalEachBtn = document.querySelectorAll('.modalCommonCls');
        modalEachBtn.forEach(function (eachModalBtn) {
            eachModalBtn.addEventListener('click', function (event) {
                var getAttr = this.getAttribute('modalAttr')
                document.getElementById(getAttr).style.display = "block";
                document.querySelector('html').style.height = "100vh"
                document.querySelector('html').style.overflow = "hidden"
            });
        })
        // Modal Close and Open End