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';

模态弹出窗口将背景滚动到顶部

2 个答案: