单击覆盖上的图标后在模式窗口中显示图像

Posted 2023-05-08

【中文标题】单击覆盖上的图标后在模式窗口中显示图像

【英文标题】：Display image in a modal window after clicking an icon on overlay

【发布时间】：2018-09-02 09:25:13

【问题描述】：

我在一个 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" >
</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 个，我希望能够单击每个框的图标，并在模态窗口中加载这些框的图像。谢谢。爱德华。

【参考方案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。

【讨论】：

非常感谢。挺酷的。我不知道您可以在 jquery 中使用克隆，而且我绝对无法将它们放在一起。我的全局 css 文件中已经有一些模态窗口的代码。我只需要整理一下，但是您的回答很棒。再次感谢。