如何在没有内容的情况下使弹出窗口可滚动

Question

好吧，我正在尝试实现应该有两个空白页面的弹出窗口，我的意思是当弹出窗口被打开时，弹出窗口本身应该滚动两页。

我已经尝试过，但是当弹出窗口打开时，如果我们尝试在该弹出窗口上滚动，背景页面滚动而不是弹出我尝试使用溢出：自动，但它只是根据内容调整弹出窗口有，但我希望弹出窗口可滚动而没有任何内容想法？

我已经这样做了

html

<div class="div1"> <div class="div2"> <form></form> </div< </div>

css

.div1{
right: 45px;
font-size: 60px;
cursor: pointer;
height: 100%;
width: 100%;
display: block;
position: fixed;
z-index: 1;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, 0.9);}


.div2{
position: relative;
top: 5%;
width: 100%;
text-align: center;
margin-top: 30px;
margin: auto;
}

这就是我想在弹出窗口中显示的内容

提前感谢您的帮助

Answer 1

尝试使用overflow-y 到scroll 这是一些代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
  height: 50px;
  overflow-y: scroll;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
</style>
</head>
<body style="text-align:center">

<h2>Popup</h2>

<div class="popup" onclick="myFunction()">Click me to toggle the popup!
  <span class="popuptext" id="myPopup">Lorem ipsum dolor sit amet. Vel assumenda impedit ad impedit consequatur est iste praesentium. Est itaque veritatis nam nihil ratione aut dolor odio. Quo amet iste id iusto sapiente et quod blanditiis eos velit corrupti! Non omnis atque a quam dolores ut culpa obcaecati aut odit doloribus qui voluptatem mollitia quo laudantium neque.</span>
</div>

<script>
// When the user clicks on div, open the popup
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
</script>

</body>
</html>

overflow: auto; 是不正确的做法。使用overflow: scroll; 使其滚动。也请分享您尝试过的代码。