html在弹窗中使用滚动条
时间: 2023-08-21 09:18:11 浏览: 48
好的,您可以尝试以下代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在弹窗中使用滚动条</title>
<style>
#message {
height: 200px;
overflow: auto;
}
</style>
<script>
function showMessage() {
var message = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim pharetra magna, a sagittis enim. Nam euismod tellus sed porta gravida. Nullam commodo ultrices ligula. Maecenas vel enim quis velit tincidunt faucibus. Praesent non nibh id sapien bibendum commodo. Sed euismod tortor enim, vel aliquet lorem mollis a. Duis euismod ex nec ante tincidunt, quis dapibus augue porttitor. Integer ultrices lorem id turpis ultrices, vel venenatis velit fermentum.";
document.getElementById("message").innerHTML = message;
document.getElementById("popup").style.display = "block";
}
function closeMessage() {
document.getElementById("popup").style.display = "none";
}
</script>
</head>
<body>
<button onclick="showMessage()">点击查看消息</button>
<div id="popup" style="display: none;">
<div id="message"></div>
<button onclick="closeMessage()">关闭弹窗</button>
</div>
</body>
</html>
```
这段代码会在页面上显示一个按钮,点击按钮后会在弹窗中显示一段文本消息,并使用 CSS 中的 `overflow: auto` 属性将弹窗的内容包装在一个固定高度的区域中,并提供滚动条。弹窗中还包含一个按钮,用于关闭弹窗。
具体实现是通过 JavaScript 中的 `innerHTML` 将消息显示在弹窗的 `div` 元素中,并通过 `display` 属性控制弹窗的显示和隐藏。