将图像插入模态对话框答案

【问题标题】：Insert an image into a modal dialog将图像插入模态对话框
【发布时间】：2020-09-08 20:54:03
【问题描述】：

我想在 Modal 中插入一个图像，但我需要使用变量 data-image 的值，因为它会根据图像的值而变化。

<script type="text/javascript">
        $('#myModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var title = button.data('title')
            var overview = button.data('overview')
            var image = button.data('image')
            var url = "<img src='https://image.tmdb.org/t/p/w600_and_h900_bestv2/+image+'></img>"
            var modal = $(this)
            modal.find('#title').text(title)
            modal.find('#image').attr('src',url)
            modal.find('#overview').text(overview)
        })
    </script>

                                <a href="#" role="button" data-id="{{$item['id']}}" data-title="{{$item['title']}}" data-image="{{$item['imagem']}}" data-overview="{{$item['overview']}}" data-toggle="modal" data-target="#myModal">

<div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle"><div id="title"></div></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <p><div id="image"></div></p>
            <p><div id="overview"></div></p>
        </div>
    </div>
</div>

我尝试使用一些形状，如 text、val、innerhtml，但没有成功。让它按我的需要工作的最佳方法是什么？

【问题讨论】：

标签： javascript html bootstrap-4

【解决方案1】：

您需要使用img 元素与div 相对，以设置在您的模态中动态显示您的img 和其他内容。

它不工作的原因是 DOM 内容已准备好并且您正在将样式应用于 div 并且它无法加载图像 asynchronously 这就是您什么都看不到的原因。

我添加了demo 数据和其他几个按钮，以表明它现在与来自data-attributes. 的不同data 一起工作

现场工作演示：

$('#myModal').on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var title = button.data('title')
  var overview = button.data('overview')
  var image = button.data('image')
  var modal = $(this)
  modal.find('#title').text(title)
  modal.find('#image').attr('src', image)
  modal.find('#overview').text(overview)
})

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<a href="#" role="button" data-id="Foo" data-title="Foo" data-image="https://via.placeholder.com/150" data-overview="Foo" data-toggle="modal" data-target="#myModal">Click Me</a>
<br>
<a href="#" role="button" data-id="Bar" data-title="Bar" data-image="https://via.placeholder.com/300" data-overview="Bar" data-toggle="modal" data-target="#myModal">Click Me 2</a>
<br>
<a href="#" role="button" data-id="Example" data-title="Example" data-image="https://via.placeholder.com/350" data-overview="Example" data-toggle="modal" data-target="#myModal">Click Me 3</a>

<div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">
          <div id="title"></div>
        </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p><img src="" id="image" /></p>
        <p>
          <div id="overview"></div>
        </p>
      </div>
    </div>
  </div>

【讨论】：

@ManoelSilva 很高兴听到这个消息。快乐编码

【解决方案2】：

首先，了解什么是模态对话框：它只是一个 div（带有内容），它位于页面其余部分的顶部，通常伴随着另一个位于其正下方并部分变暗的 div页面的其余部分，同时防止用户点击下面的任何内容。这两个 div 开始隐藏，但可以根据用户活动显示，然后重新隐藏。

modal 字表示此 div 结构具有焦点 - 在模式对话框关闭之前，用户无法与页面的任何其他部分进行交互。这是通过第二个（覆盖）div 实现的，该 div 的高度/宽度为 100%，并被定位（通过 z-index）堆叠在对话框和页面的其余部分之间。

需要注意的重要一点是，它们只是普通的 div 结构，存在于页面上——或者随意添加到页面中。这意味着，您可以像更改任何其他 div 的内容一样轻松地更改模态 div 结构中的内容（文本或 html）。模态 div 结构没有什么不同。

Bootstraps 模态对话框完全相同，但它们包含一些额外的嘶嘶声，增加了一些额外的视觉酷感，并使它们更易于使用。除此之外，它们与自制的模态对话框完全一样——与普通的 div 结构完全一样。

为了演示，我们将创建一个超级简单的自制模态对话框，并使用它来完成您的要求。

关于自制模态对话框，请注意以下几点：

(a) 我们使用 position:fixed 或 position:absolute 从通常的 HTML 流中删除模态 div 结构 - 使其位于页面其余部分的顶部。
(b) 我们使用z-index 将模态 div 结构定位在页面其余部分的上方
(c) 我们添加了第二个 div（“覆盖”），它位于页面顶部，但位于模态框下方。其目的是使模态对话框下方的页面变暗和，以防止用户在完成对话框之前单击页面上的任何内容。

$('button').click(function(){
  let img = $('#modal').data('image');
  $('#modal-content').html(`<img src="${img}" />`);
  $('#overlay, #modal').fadeIn();
});

$('#modal-close').click(function(){
  $('#overlay, #modal').fadeOut();
});

#overlay{z-index:998;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);}

#modal{z-index:999;position:fixed;top:15vh;left:25vw;width:50vw;height:30vh;}

#modal-close{position:absolute;top:0;right:0;padding:10px;font-size:2em;border:1px solid grey;}
#modal-close:hover{color:dodgerblue; border:1px solid dodgerblue;cursor:pointer;}

#overlay, #modal{display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='overlay'></div>
<div id='modal' data-image='http://placekitten.com/400/300'>
   <div id='modal-close'>X</div>
   <div id='modal-content'></div>
</div>
<button>Show Modal</button>

参考资料：

Easiest way to use a div as a modal dialog with jQuery

【讨论】：