html点击按钮弹出带有滚动条的弹窗

可以使用HTML、CSS和JavaScript来实现这个功能。以下是一个简单的示例代码。

HTML代码：

<button onclick="openPopup()">打开弹窗</button>
<div id="popup" class="popup">
  <div class="popup-content">
    <h3>弹窗标题</h3>
    <p>这里是弹窗内容。</p>
  </div>
</div>

CSS代码：

.popup {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.popup-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

JavaScript代码：

function openPopup() {
  document.getElementById("popup").style.display = "block";
}

window.onclick = function(event) {
  var popup = document.getElementById("popup");
  if (event.target == popup) {
    popup.style.display = "none";
  }
}

这段代码中，首先定义了一个按钮，点击按钮时调用 `openPopup()` 函数打开弹窗。弹窗部分使用 `<div>` 元素实现，设置其样式为 `display: none`，即隐藏弹窗。当按钮点击时，通过 JavaScript 修改该元素的 `display` 属性为 `block`，使其显示出来。弹窗的样式通过 CSS 定义，其中设置了 `overflow: auto` 属性，使得在弹窗内容超出弹窗大小时出现滚动条。最后，通过 JavaScript 监听弹窗外部的鼠标点击事件，当点击弹窗外部时，隐藏弹窗。