<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>modal</title>
    <link rel="stylesheet" href="modaloverlay.css" />
    <script src="modaloverlay.js" defer></script>
</head>
<body>
    <div class="container" id="cont">
        <button class="buttons" id="btnshow" onclick="showoffer()">Show Offer</button>
        <div class="modal" id="idmodal" >
            <div><button type="button" class="close-button" onclick="closemodal()" id="btnclose">X</button> </div>
            <div>Click the button below to accept our amazing offer!</div>
            <button id="accept" onclick="accept()">Accept offer</button>
        </div>
        <div id="divaccepted" hidden>
            Offer accepted
        </div>
    </div>
</body>
</html>


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

.modal {
    width: 300px;
    height: 300px;
    background-color: white;
    padding: 10px;
    border-style:solid; 
    border-width: 1px;
    
    display: none;
    flex-flow: column wrap;
    justify-content: space-between;
}

#divaccepted {
    display: none;
}

let modal = document.getElementById("idmodal");
let btnshow = document.getElementById("btnshow");
let divaccepted = document.getElementById("divaccepted");
let container = document.getElementById("cont");


function showoffer() {
    btnshow.style.display = 'none';
    modal.style.display = 'flex';
    container.style.backgroundColor = 'lightgray';

}


function accept() {
    modal.style.display = 'none';
    divaccepted.style.display = 'flex';
    
}

function closemodal() {
    
    modal.style.display = 'none';
    btnshow.style.display = 'flex';
    container.style.backgroundColor = 'white';
}

document.addEventListener('click', e => {

    if (modal.style.display === 'flex') {

        let inside = modal.contains(e.target);
        let showBtnInside = btnshow.contains(e.target);

        if (!inside && !showBtnInside) {
            closemodal();
        }

    }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.