javascript - 滚动时弹出模型隐藏在 body 旁边？

Question

我创建了一个button，当我点击button然后popup模型显示时，它会隐藏在页面主体旁边，按钮也会隐藏我滚动。我希望当弹出窗口出现时我无法滚动我的页面主体。我使用 Bootstrap 创建了模型弹出窗口。这是屏幕截图 LINK

.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

 /* Modal Content */
 .modal-content {
 position: relative;
 background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
 }

/ * Add Animation */
  @-webkit-keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

 @keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}

/* The Close Button */
  .close {
  color: white;
float: right;
font-size: 28px;
font-weight: bold;
 }

  close:hover,
  .close:focus {
 color: #000;
text-decoration: none;
 cursor: pointer;
 }

.modal-header {
padding: 2px 16px;
background-color: #2098d1;
color: white;
}

.modal-body {padding: 2px 16px;}

 .modal-footer {
    padding: 2px 16px;
  background-color: #5cb85c;
   color: white;
 }

<div class="modal-content">
  <div class="modal-header">
  <span class="close">×</span>
   <h2>Order Services</h2>
  </div>
   <div class="modal-body">
   </div>

          </div>
          <br>
          <div class="row">
          <div class="col-lg-8 col-md-8">
            <textarea name="message" class="form-control" placeholder="Message" style="width: 100%;height:150px;"></textarea>
          </div>
          </div>
          <br>
            <button type="submit" class="submit btn btn-success" style="width:100%;background-color: #2098d1;border-color: #2098d1;">     
    <h2>Order</h2></button>
        </form> <!-- End form holder -->
  </div>
  <!-- <div class="modal-footer">
  <h3>Modal Footer</h3>
    </div> -->
    </div>

 </div>

   <div class="container-fluid"> 
    <div class="row">    
     <div class="col-xs-12"> <button type="button" id="myBtn" class="btn btn-success" style="width:200px;font-size:30px; transform: rotate(-90deg);
transform-origin: right, top;
-ms-transform: rotate(-90deg);
-ms-transform-origin:left, top;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin:left,center;
  position: fixed; bottom:30%; right: -73px;
color:white;" class="btn btn-success">Order</button>
  </div>
  </div>
 </div>

Answer 1

如果我没理解错的话，您希望模态框位于所有其他元素之上。您需要找出该主体的最高 z-index，然后将比它更大的 z-index 放入您的模态。假设如果您的导航菜单或右下角弹出窗口的 z-index 值为 50，则您至少需要将模式设置为 51。像这样的——

.modal {
    /* ... rest of your css ... */
    z-index: 51;
    /* ... rest of your css ... */
}