Modal Popup將背景滾動到頂部

-1

我已更新上一個問題，現在這是我遇到的新問題。Modal Popup將背景滾動到頂部

在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>

來源

2017-04-11 Christian Luneborg

而不是使用數據屬性觸發模式，請執行using 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。

來源

2017-04-11 19:51:41 Mikey

非常感謝你！但是當你點擊這些圖片時，它會彈出相同的圖像。我需要它在模態彈出窗口上的不同圖像 –

你的意思是你想要彈出他們的全尺寸圖像？在我最後的編輯中，我提到你可以使用數據屬性來存儲額外的信息。例如，您可以爲每個圖像添加'data-src'屬性來存儲完整大小的圖像路徑。然後在您的JS代碼中，只需將'this.src'替換爲'this.dataset.src'。 – Mikey

是的，這是完美的工作！謝謝！ –

我終於解決了這個問題。我添加了一行JS，當模式彈出時停止後臺進入首頁。

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

並添加了一行以啓用關閉鏈接後的滾動。

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

來源

2017-04-12 22:28:39

Modal Popup將背景滾動到頂部

回答

相關問題