js怎么写添加窗口

JS如何添加窗口：使用window.open()、使用第三方库、使用自定义模态框

在JavaScript中，添加窗口的方法多种多样，主要包括使用window.open()函数、利用第三方库（如SweetAlert）以及自定义模态框来实现。使用window.open()函数是最基本的方法，它可以打开一个新的浏览器窗口或标签页。接下来，我们将详细描述如何使用window.open()函数来添加窗口。

一、使用`window.open()`函数

1. 基本用法

window.open()函数是JavaScript内置的一个方法，用于打开一个新的浏览器窗口或标签页。其基本语法如下：

window.open(URL, name, specs, replace);

URL: 要打开的网页的地址。如果为空字符串，则会打开一个空白窗口。
name: 新窗口的名称或目标属性。可以是一个特定的名称，也可以是预定义的关键字（如 _blank, _self, _parent, _top）。
specs: 一个字符串，包含窗口的特性（如大小、位置、是否有工具栏等）。
replace: 一个布尔值，指定是否用新页面替换当前页面在浏览历史中的记录。

2. 示例代码

以下是一个简单的例子，演示如何使用window.open()函数打开一个新的窗口：

document.getElementById('openWindowButton').addEventListener('click', function() {
    window.open('https://www.example.com', '_blank', 'width=800,height=600');
});

在这个示例中，我们通过点击一个按钮打开了一个新的窗口，窗口的大小被设置为800×600像素。

二、使用第三方库

1. SweetAlert

SweetAlert 是一个非常流行的用于创建模态框的第三方库，它提供了丰富的定制选项和良好的用户体验。使用SweetAlert可以轻松创建美观且功能强大的窗口。

2. 安装和使用

首先，你需要引入SweetAlert库，可以通过CDN或者npm进行安装：

<!-- 引入SweetAlert的CDN -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

然后，你可以使用如下代码来创建一个模态框窗口：

document.getElementById('openSweetAlertButton').addEventListener('click', function() {
    Swal.fire({
        title: '自定义窗口',
        text: '这是一个使用SweetAlert创建的窗口',
        icon: 'info',
        confirmButtonText: '确定'
    });
});

三、自定义模态框

1. 创建模态框的HTML和CSS

除了使用现成的库，你也可以通过自定义HTML和CSS来创建模态框。首先，创建模态框的HTML结构：

<!-- 模态框的HTML -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>这是一个自定义的模态框窗口。</p>
  </div>
</div>

然后，添加一些CSS样式来美化模态框：

/* 模态框的CSS */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

2. 使用JavaScript控制模态框

最后，通过JavaScript来控制模态框的显示和隐藏：

// 获取模态框元素
var modal = document.getElementById('myModal');
// 获取打开模态框的按钮
var btn = document.getElementById('openModalButton');
// 获取关闭模态框的<span>元素
var span = document.getElementsByClassName('close')[0];
// 当点击按钮时，打开模态框
btn.onclick = function() {
  modal.style.display = 'block';
}
// 当点击<span> (x) 时，关闭模态框
span.onclick = function() {
  modal.style.display = 'none';
}
// 当点击模态框外部时，关闭模态框
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = 'none';
  }
}

通过以上步骤，你可以创建一个功能齐全的自定义模态框窗口。

四、综合应用

在实际项目中，你可能需要结合多种方法来实现复杂的窗口功能。例如，可以在主窗口中使用window.open()函数打开一个新的浏览器窗口，同时在新窗口中使用自定义模态框来展示内容。

示例代码

以下是一个综合应用的示例代码：

// 在主窗口中打开一个新窗口
document.getElementById('openMainWindowButton').addEventListener('click', function() {
    var newWindow = window.open('', '_blank', 'width=800,height=600');
    newWindow.document.write('<html><head><title>新窗口</title></head><body>');
    newWindow.document.write('<h1>欢迎来到新窗口</h1>');
    newWindow.document.write('<button id="openModalButton">打开模态框</button>');
    newWindow.document.write('<div id="myModal" class="modal"><div class="modal-content"><span class="close">&times;</span><p>这是一个自定义的模态框窗口。</p></div></div>');
    newWindow.document.write('</body></html>');
    // 在新窗口中添加控制模态框的JavaScript代码
    newWindow.document.write('<script>');
    newWindow.document.write('var modal = document.getElementById("myModal");');
    newWindow.document.write('var btn = document.getElementById("openModalButton");');
    newWindow.document.write('var span = document.getElementsByClassName("close")[0];');
    newWindow.document.write('btn.onclick = function() { modal.style.display = "block"; }');
    newWindow.document.write('span.onclick = function() { modal.style.display = "none"; }');
    newWindow.document.write('window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }');
    newWindow.document.write('</script>');
});

在这个综合应用示例中，我们在主窗口中通过点击按钮打开一个新的浏览器窗口，然后在新窗口中使用自定义模态框来展示内容。

五、总结

通过本文的介绍，我们了解了如何在JavaScript中添加窗口的多种方法，包括使用window.open()函数、利用第三方库（如SweetAlert）以及自定义模态框。每种方法都有其优点和适用场景，开发者可以根据实际需求选择合适的方法来实现功能。希望这篇文章能够帮助你更好地掌握在JavaScript中添加窗口的技巧和方法。