单击叠加层上的图标后以模式 window 显示图像

Question

我在 div 中有一个基本图片，当您将鼠标悬停在它上面时，会覆盖一个叠加层，中间有一个搜索图标。当您单击该图标时，我想在模态 window 中加载基本图像。

<div class="col-xs-4 column">
    <div class="overlay">   
       <i class="fa fa-search-plus im-1"></i> 
     </div>
  <img src="images/image.jpg" alt="image">
</div>

这是CSS

.overlay{
    position:absolute;
    top:0px;
    bottom:0px;
    left: 0px;
    right:0px;
    background-color: rgba(255,165,0,0.7);
}
/*  Displays the icon in the middle of the overlay */
.overlay .svg-inline--fa{
    display:block;
    position:relative;
    font-size:36px;
    color:#ffffff;
    width:15%;
    margin-left:auto;
    margin-right:auto;
    top:40%;
}

最后 JQuery

$(document).ready(function(){
    $('.overlay').hide();
})


$(document).ready(function(){
    $('.column').mouseenter(function(){
   $(this).find('.overlay').fadeIn('slow');
})
})

$(document).ready(function(){
    $('.column').mouseleave(function(){
   $(this).find('.overlay').fadeOut('slow');
})
})

我有 6 个这样的框，每行 3 个，我希望能够单击每个框的图标并在模态 window 中加载该框的图像。谢谢。爱德华

Answer 1

在您的 html 中添加此模式。

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body" id="add_image">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

在你的 JS 中。

$(document).ready(function(){
  $(document).on("click",".overlay i",function(){
    var img = $(this).parents(".column").find("img").clone();
    $("#add_image").html(img);
    $("#myModal").modal("show");
  });
});

不要忘记在文件中添加 Bootstrap JS 和 CSS。

单击叠加层上的图标后以模式 window 显示图像

Display image in a modal window after clicking an icon on overlay

jquery

overlay

modal-dialog

twitter-bootstrap