彈出式模型在滾動時隱藏在身體旁邊？

Question

我創建了一個button當我點擊button然後popup模型顯示，但它會隱藏在頁面主體和按鈕也隱藏，當我滾動。我希望當彈出窗口然後我不能滾動我的頁面body.I已創建使用bootstrap.Here模式彈出窗口截圖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-索引，然後將更大的z-索引放到你的模態中。假設如果你的導航菜單或右下角的彈出菜單的z-index值爲50，你至少需要把你的模態設置爲51。像這個 -

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