JavaScript 弹窗学习笔记
什么是弹窗？
弹窗（popup window）是指在网页上打开一个新的浏览器窗口，用于显示一些特定信息或者交互功能。在 JavaScript 中，可以通过调用 window.open() 函数来创建一个新的弹窗窗口。
如何创建弹窗？
以下是使用 JavaScript 创建一个简单的弹窗的示例：
javascriptCopy Codefunction openPopupWindow() {
window.open("popup.html", "popup", "width=400,height=300");
}
这个函数会创建一个新的宽度为 400px，高度为 300px 的弹窗，并加载 popup.html 文件。
如何关闭弹窗？
JavaScript 中可以使用 window.close() 方法来关闭当前的弹窗：
javascriptCopy Codefunction closePopupWindow() {
window.close();
}
需要注意的是，如果这个弹窗是由另一个窗口通过 window.open() 打开的，那么只有打开它的那个窗口才能关闭它。
如何向弹窗传递数据？
可以通过在 URL 的查询参数中传递数据来向弹窗传递参数，如下所示：
javascriptCopy Codefunction openPopupWindowWithData(data) {
var url = "popup.html?data=" + encodeURIComponent(data);
window.open(url, "popup", "width=400,height=300");
}
当弹窗中的页面加载完成后，可以通过 window.location.search 属性获取查询参数，如下所示：
javascriptCopy Codevar data = decodeURIComponent(window.location.search.substring(1).split("=")[1]);
实例：创建一个登录弹窗
以下是一个使用 JavaScript 创建一个简单的登录弹窗的示例：
htmlCopy Code<html>
<head>
<title>Login Popup</title>
<script>
function openLoginPopup() {
window.open("login.html", "login", "width=400,height=300");
}
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
alert("Username: " + username + ", Password: " + password);
window.close();
}
</script>
</head>
<body>
<button onclick="openLoginPopup()">Open Login Popup</button>
</body>
</html>
以上代码中，点击按钮会弹出一个宽度为 400px，高度为 300px 的登录弹窗。在弹窗中输入用户名和密码后，点击登录按钮会弹出一个提示框，显示输入的用户名和密码，并关闭弹窗。