javascript - 将图像插入模态对话框
问题描述
我想在 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">×</span>
</button>
</div>
<p><div id="image"></div></p>
<p><div id="overview"></div></p>
</div>
</div>
</div>
我尝试使用一些形状,如 text、val、innerhtml,但没有奏效。使它按我的需要工作的最佳方法是什么?
解决方案
首先,了解什么是模态对话框:它只是一个 div(带有内容),它的位置使其位于页面其余部分的顶部,通常伴随着另一个位于其正下方的 div,并部分使其余部分变暗页面,同时防止用户点击下面的任何内容。这两个 div 开始隐藏,但可以根据用户活动显示,然后重新隐藏。
该词modal
表示此 div 结构具有焦点 - 在模式对话框关闭之前,用户无法与页面的任何其他部分进行交互。这是通过高度/宽度为 100% 的第二个(覆盖)div 实现的,并且定位(通过 z-index)以堆叠在对话框和页面的其余部分之间。
需要注意的重要一点是,它们只是页面上存在的普通 div 结构 - 或者随意添加到页面中。这意味着,您可以像更改任何其他 div 的内容一样轻松地更改模态 div 结构中的内容(文本或 html)。模态 div 结构没有什么不同。
Bootstrap 模态对话框完全相同,但它们包含一些额外的嘶嘶声,增加了一些额外的视觉酷感,并使它们更容易使用。除此之外,它们完全像自制的模态对话框 - 完全像普通的 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>
参考:
推荐阅读
- angular - Angular 2 将 JSON 数组映射到模型类
- java - 根据点击次数设置 switch 语句
- python - Python 中的方法类似于 myArray.remove("john") 且不区分大小写
- solr - SOLR:对带有空格的文本字段进行模糊搜索
- ruby-on-rails - Ruby 向现有对象添加变量?
- c - 如何在c中正确使用realloc?
- python - 形成列表中可能的最大数
- git - gitlab通过命令行合并请求
- python - 使用 pip 从本地文件系统文件夹安装 Python 包
- oracle - 尝试建立一个触发器,在每次更新后计算行数