CSS 使用 window.open 创建带有垂直滚动条的弹窗

在本文中，我们将介绍如何使用CSS和JavaScript中的window.open方法创建带有垂直滚动条的弹窗。垂直滚动条可以在弹窗中显示超出可见区域的内容，并提供更好的用户体验。

阅读更多：CSS 教程

使用window.open方法创建弹窗

在开始介绍如何创建带有垂直滚动条的弹窗之前，我们先来了解一下如何使用window.open方法创建一个普通的弹窗。

var myWindow = window.open("", "myWindow", "width=500,height=500");
myWindow.document.write("<p>Hello World!</p>");

上述代码片段中，我们使用window.open方法创建了一个宽度为500px，高度为500px的弹窗，并在弹窗中输出了”Hello World!”。

使用CSS样式为弹窗添加垂直滚动条

接下来，我们将使用CSS样式为弹窗添加垂直滚动条。首先，我们需要为弹窗的内容区域设置固定的高度，并将overflow-y属性设置为scroll，以启用垂直滚动条。

var myWindow = window.open("", "myWindow", "width=500,height=500");
myWindow.document.write("<style>body { overflow-y: scroll; height: 300px; }</style>");
myWindow.document.write("<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>");

在上述代码中，我们给弹窗的内容区域添加了一个高度为300px的样式，并设置了overflow-y属性为scroll。这样当弹窗中的内容超出300px的高度时，就会显示垂直滚动条。

CSS样式细微调整

在上述示例中，我们为弹窗的内容区域设置了固定的高度。如果我们希望让弹窗根据内容自动调整高度，并在内容超出一定高度时显示垂直滚动条，可以使用max-height属性。

var myWindow = window.open("", "myWindow", "width=500,height=500");
myWindow.document.write("<style>body { overflow-y: scroll; max-height: 300px; }</style>");
myWindow.document.write("<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>");

在这个示例中，我们使用max-height属性设置了弹窗内容区域的最大高度为300px。当内容超出这个高度时，垂直滚动条将被显示，从而允许用户滚动查看内容。