js弹出div登录窗口

基础概念

JavaScript 弹出 div 登录窗口是一种常见的网页交互方式，通过在页面上动态创建一个 div 元素，并使用 JavaScript 控制其显示和隐藏，从而实现一个模态对话框（modal dialog）用于用户登录。

类型

静态模态：在 HTML 中预先定义好 div，通过 JavaScript 控制其显示。
动态模态：完全使用 JavaScript 动态创建 div 及其内容。

应用场景

用户认证：在用户访问某些需要登录才能查看的页面时弹出登录窗口。
表单提交后的反馈：在用户提交表单后，弹出确认或错误提示。
临时通知：显示重要信息或提醒用户某些操作。

示例代码

以下是一个简单的静态模态登录窗口的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录窗口示例</title>
<style>
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}
.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 30%;
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
</style>
</head>
<body>

<button id="openModalBtn">打开登录窗口</button>

<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>用户登录</h2>
        <form id="loginForm">
            <input type="text" placeholder="用户名" required>
            <input type="password" placeholder="密码" required>
            <button type="submit">登录</button>
        </form>
    </div>
</div>

<script>
// 获取模态窗口元素
var modal = document.getElementById("myModal");

// 获取打开按钮元素
var btn = document.getElementById("openModalBtn");

// 获取关闭按钮元素
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>