为什么我无法滚动我的叠加层？

Question

当我在屏幕上滚动时，一切都很好。 当我点击我的按钮时，会出现一个叠加层。 但是，我仍然可以在我的叠加下滚动div，我想要的只是滚动我的叠加层。

$('#addCustomerBtn').on('click', function() {
  // window.location.href = "http://dev.rabbijet.com/crm/create.html";
  var modal = document.getElementById('myModal');
  modal.style.display = "block";
})

body {
  overflow: auto;
}

.black {
  height: 200px;
  width: 800px;
  background-color: black;
}

.gray {
  height: 200px;
  width: 800px;
  background-color: gray;
}

.green {
  height: 700px;
  background-color: green;
}

.yellow {
  height: 700px;
  background-color: yellow;
}

#addCustomerBtn {
  font-size: 14px;
  width: 120px;
  border: 1px solid #20ACB3;
  background-color: #20ACB3;
}

#myModal {
  display: none;
  position: fixed;
  /* Stay in place */
  z-index: 999;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  background-color: rgba(0, 0, 0, 0.4);
}

#create-form {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #000;
  width: 500px;
  height: 1500px;
  background-color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="btn btn-primary" id="addCustomerBtn">Click</div>
  <div class="black"></div>
  <div class="gray"></div>
  <div class="black"></div>
  <div class="gray"></div>
  <div class="black"></div>
  <div class="gray"></div>
  <div class="black"></div>
  <div class="gray"></div>
  <div class="black"></div>
  <div class="gray"></div>
  <div class="black"></div>
  <div class="gray"></div>
</div>

<div id="myModal">
  <div id="create-form">
    <div class="green"></div>
    <div class="yellow"></div>
  </div>
</div>

Answer 1

将overflow-y: scroll;添加到CSS中的模态类。

＆＃13;

＆＃13;

$('#addCustomerBtn').on('click', function() {
  // window.location.href = "http://dev.rabbijet.com/crm/create.html";
  var modal = document.getElementById('myModal');
  modal.style.display = "block";
})

＆＃13;

body {
  overflow: auto;
}

.black {
  height: 200px;
  width: 800px;
  background-color: black;
}

.gray {
  height: 200px;
  width: 800px;
  background-color: gray;
}

.green {
  height: 700px;
  background-color: green;
}

.yellow {
  height: 700px;
  background-color: yellow;
}

#addCustomerBtn {
  font-size: 14px;
  width: 120px;
  border: 1px solid #20ACB3;
  background-color: #20ACB3;
}

#myModal {
  display: none;
  position: fixed; 
  overflow-y: scroll;
  /* Stay in place */
  z-index: 999;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  background-color: rgba(0, 0, 0, 0.4);
}

#create-form {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #000;
  width: 500px;
  height: 1500px;
  background-color: red;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="btn btn-primary" id="addCustomerBtn">Click</div>
  <div class="black"></div>
  <div class="gray"></div>
  <div class="black"></div>
  <div class="gray"></div>
  <div class="black"></div>
  <div class="gray"></div>
  <div class="black"></div>
  <div class="gray"></div>
  <div class="black"></div>
  <div class="gray"></div>
  <div class="black"></div>
  <div class="gray"></div>
</div>

<div id="myModal">
  <div id="create-form">
    <div class="green"></div>
    <div class="yellow"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这个答案非常粗糙，但基本上你所做的是允许在模态容器上溢出，当单击该按钮时，你不允许在父容器上溢出。关闭模式时，请记住删除我从文档正文中创建的.overflow-hidden类。此外，如果您使用jQuery 使用它。它很受欢迎，因为它使得很多东西，比如应用样式，更容易。

＆＃13;

＆＃13;

$('#addCustomerBtn').on('click', function() {
  // window.location.href = "http://dev.rabbijet.com/crm/create.html";
  var modal = $('#myModal');
  modal.css('display','block');
  $(document.body).toggleClass('overflow-hidden');

})

＆＃13;

body {
  overflow: auto;
}
.overflow-hidden {
  overflow: none;
}
.black {
  height: 200px;
  width: 800px;
  background-color: black;
}
.gray {
  height: 200px;
  width: 800px;
  background-color: gray;
}
.green {
  height: 700px;
  background-color: green;
}
.yellow {
  height: 700px;
  background-color: yellow;
}
#addCustomerBtn {
  font-size: 14px;
  width: 120px;
  border: 1px solid #20ACB3;
  background-color: #20ACB3;
}
#myModal {
  display: none;
  position: absolute;
  /* Stay in place */
  z-index: 999;
  /* Sit on top */
  left: 0;
  top: 0;
  bottom: 0;
  /* Full width */
  right: 0;
  /* Full height */
  background-color: rgba(0, 0, 0, 0.4);
  overflow: auto;
}
#create-form {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #000;
  width: 500px;
  height: 1500px;
  background-color: red;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="btn btn-primary" id="addCustomerBtn">Click</div>
  <div class="black"></div>
  <div class="gray"></div>
  <div class="black"></div>
  <div class="gray"></div>
  <div class="black"></div>
  <div class="gray"></div>
  <div class="black"></div>
  <div class="gray"></div>
  <div class="black"></div>
  <div class="gray"></div>
  <div class="black"></div>
  <div class="gray"></div>
</div>

<div id="myModal">
  <div class="close-button">X</div>
  <div id="create-form">
    <div class="green"></div>
    <div class="yellow"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;