模態彈出窗口將背景滾動到頂部

Question

我已經更新了上一個問題，現在這是我遇到的新問題。

在http://www.christianluneborg.com網站上。 單擊“網站”鏈接，然后單擊“純網絡”圖像。 您會注意到彈出模式，並且頁面背景滾動回到首頁。 我該如何阻止呢？ 它需要保留在頁面的“網站”部分。

HTML-

<div class="image-wrap">
<a href="#" onclick="lightbox_open();"><img src="img/img2.jpg" alt="Pure Network"></a>
</div>

模態-

<div id="Modal-Pure">
<a href="#" onclick="lightbox_close();"><img src="img/website151.jpg" alt="" /></a>
</div>
<div id="fade" onClick="lightbox_close();"></div>

CSS-

#fade {
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.4;
    opacity:.50;
    filter: alpha(opacity=50);
}
#Modal-Pure {
    display: none;
    position: fixed;
    top: 25%;
    left: 35%;
    width: 836px;
    height: 636px;
    margin-left: -150px;
    margin-top: -100px;                 
    background: #000;
    z-index:1002;
    overflow:hidden;
}

Javascript-

<script>
    window.document.onkeydown = function (e)
{
    if (!e){
    e = event;
}
    if (e.keyCode == 27){
    lightbox_close();
    }
}
function lightbox_open(){
    document.getElementById('Modal-Pure').style.display='block';
    document.getElementById('fade').style.display='block';  
}
function lightbox_close(){
    document.getElementById('Modal-Pure').style.display='none';
    document.getElementById('fade').style.display='none';
}
</script>

Answer 1

與其使用數據屬性觸發模式，不如使用JavaScript 。

 var myModal = $('#myModal'); $('img').click(function(){ myModal.find('img').attr('src', this.dataset.src); myModal.modal('show'); }); 

 #myModal img { max-width: 300px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <img src="https://cdn.pixabay.com/photo/2017/03/26/10/33/stone-goat-2175189__340.jpg" data-src="https://cdn.pixabay.com/photo/2017/03/26/10/33/stone-goat-2175189_960_720.jpg" width="100" alt="goat"> <img src="https://cdn.pixabay.com/photo/2017/03/17/04/07/beautiful-2150881__340.jpg" data-src="https://cdn.pixabay.com/photo/2017/03/17/04/07/beautiful-2150881_960_720.jpg" width="150" alt="beauty"> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <img /> </div> </div> </div> </div> 

旁注： id屬性不應為數字。 最好使用數據屬性（例如， data-id來存儲數字。 如果需要在JS代碼中訪問它，則可以執行this.dataset.id 。

Answer 2

我終於解決了問題。 當模式彈出時，我添加了一行JS來阻止背景轉到首頁。

document.body.style.overflow='hidden';  

並添加了一行以在單擊關閉鏈接后啟用滾動。

document.body.style.overflowY='visible';