将图像插入模式对话框 [英] Insert an image into a modal dialog

问题描述

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

I want to insert an image in Modal but I need to use the value of the variable data-image as it will change according to the value of the 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>

我尝试使用一些形状，例如文本，val，innerhtml，但是它不起作用.使它满足我的需要的最佳方法是什么?

I tried to use some shapes like text, val, innerhtml, but it didn't work. What is the best way to make it work what I need?

推荐答案

您需要使用

You need to use an img element as oppose to a div to set display your img and other content dynamically in your modal.

其无法正常工作的原因是DOM内容已准备就绪，您正在将样式应用于div，并且无法加载图像asynchronously，这就是为什么看不到任何内容的原因.

The reason its not working is DOM content is ready and you are applying styles to a div and it can not load an image asynchronously thats why you are not seeing anything.

我添加了demo数据和其他几个按钮，以表明它们现在都可以与来自data-attributes.

I have added demo data and few other button to show that its all working now with different data coming from data-attributes.

实时工作演示:

$('#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>

这篇关于将图像插入模式对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！