Question

我在div中有一个基本图像，当你将鼠标悬停在它上面时，一个覆盖图会覆盖它，并且它在中间有一个搜索图标。当您单击图标时，我想在模态窗口中加载基本图像。

<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个，我希望能够点击每个盒子的图标，并在模态窗口中加载那些盒子图像。谢谢。爱德华。

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。

单击叠加图标后，在模态窗口中显示图像

1 个答案: