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将背景滚动到顶部

回答

相关问题