小窗口中的 JavaScript 弹出窗口

当您需要展示一些提示信息或者需要将用户重定向到另一个页面时，JavaScript 弹出窗口是一种非常有用的技术。在本文中，我们将介绍如何使用 JavaScript 在小窗口中创建一个弹出窗口。

在 HTML 中添加触发器

首先，在 HTML 页面中添加一个触发器按钮或链接。这个按钮或链接将会触发弹出窗口的显示。

<button onclick="popup()">点击弹出窗口</button>

在此代码中，我们将 onclick 事件绑定到 popup() 函数。当用户点击按钮时，popup() 函数将会被调用。

编写弹出窗口的 JavaScript

现在，我们来编写 JavaScript 代码，以在小窗口中显示弹出窗口。以下是一个简单的代码段：

<script>
function popup() {
  window.open("https://www.example.com", "example", "height=500,width=500");
}
</script>

在这段代码中，我们定义了一个名为 popup() 的函数，它使用 window.open() 方法来创建一个新窗口。在这个方法的参数中，我们指定了新窗口的高度和宽度，并给它取了一个名字 example。URL 的值也需要被指定为需弹出的地址。

使用 CSS 样式来定制弹出窗口

通过 CSS 样式，您可以为弹出窗口定制字体、颜色、大小等样式。可以使用以下优化过的 JavaScript 代码：

<script>
function popup() {
  var myWindow = window.open("https://www.example.com", "example", "height=500,width=500");
  myWindow.document.write("<style>body { font-family: Arial; font-size: 20px; color: blue; }</style>");
}
</script>

在这段代码中，我们添加了一个 myWindow.document.write() 函数，以在新窗口中输出样式。

结论

JavaScript 弹出窗口是一个非常有用的技术，可以用于向用户显示提示消息、展示表格、绘制图形等。以上代码示例可以为程序员提供一些有用的指导，以帮助他们创建自己的弹出窗口。

参考链接：

Window.open() - MDN Web 文档