モーダルポップアップが背景を上にスクロールします

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

データ属性を使用してモーダルをトリガする代わりに、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となります。

Answer 2

私はついにこの問題を解決しました。私は、モーダルがポップアップするときにトップページに行くバックグラウンドを停止するJSの行を追加しました。

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

さらに、リンクを閉じるとスクロールを有効にする行が追加されました。

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