如何使用HTML，CSS和JavaScript创建模态框

在这个例子中，我们将学习如何使用HTML，CSS和JavaScript创建模态框。模态框是显示在屏幕顶部的对话框。我们将使用HTML，CSS和JavaScript创建一个模态框。

方法：首先，我们将创建一个按钮，当用户点击按钮时，模态框将打开。我们将为此按钮添加一个点击事件监听器，以便在点击时打开我们的模态框。模态框将有两个部分，遮罩层和模态框主体，而模态框最初将通过将显示设置为none来隐藏。模态框的主体将包含标题、内容和一个关闭模态框的按钮。此外，可以通过单击模态框的遮罩层部分来关闭此模态框。关闭按钮内部和遮罩层包装器都将添加点击事件监听器，以便在点击时使用”display none”属性再次隐藏模态框。

例子：本例中将使用上述方法。

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css" />
    <title>Page Title</title>
</head>
 
<body>
    <div class="open-modal-btn-wrapper">
        <button class="open-modal-btn">
            Open Modal
        </button>
    </div>
 
    <div class="modal-overlay hide">
        <div class="modal-wrapper">
            <div class="close-btn-wrapper">
                <button class="close-modal-btn">
                    Close
                </button>
            </div>
            <h1>GeeksforGeeks</h1>
            <div class="modal-content">
                Greetings from GeeksforGeeks
            </div>
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>

CSS

.modal-overlay {
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
 
.modal-wrapper {
    width: 300px;
    height: 300px;
    background: ghostwhite;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
.open-modal-btn-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
.close-modal-btn,
.open-modal-btn {
    padding: 8px;
    background: slateblue;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 15px;
    color: ghostwhite;
    font-weight: 5px;
    margin-left: auto;
    margin-top: 10px;
    margin-right: 10px;
    cursor: pointer;
}
 
.close-btn-wrapper {
    display: flex;
}
 
.modal-content {
    margin: 20px auto;
    max-width: 210px;
    width: 100%;
}
 
.hide {
    display: none;
}
 
h1 {
    text-align: center;
}

Javascript

const openBtn = document.querySelector(".open-modal-btn");
const modal = document.querySelector(".modal-overlay");
const closeBtn = document.querySelector(".close-modal-btn");
 
function openModal() {
    modal.classList.remove("hide");
}
 
function closeModal(e, clickedOutside) {
    if (clickedOutside) {
        if (e.target.classList.contains("modal-overlay"))
            modal.classList.add("hide");
    } else modal.classList.add("hide");
}
 
openBtn.addEventListener("click", openModal);
modal.addEventListener("click", (e) => closeModal(e, true));
closeBtn.addEventListener("click", closeModal);

输出：

如何使用HTML，CSS和JavaScript创建模态框