如何在模态中传递data-attribute [英] how to pass data-attribute in modal
本文介绍了如何在模态中传递data-attribute的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要在我的模态中传递data属性。在src中附加图像标记单击链接时。以下是我的代码。我很困惑。我知道我们可以使用JavaScript onclick方法通过引用传递。任何人都可以给我可执行代码。我的代码如下。我不擅长制作JavaScript函数。
I need to pass the data attribute in my modal. to attach with image tag in src When clicked on the link. Below is my code. I am confused. I know we can use JavaScript onclick method to pass by reference. Still can anyone give me executable code. My code is below. I am not really good in making JavaScript functions.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<a href="#checkImage" data-toggle="modal" data-myimage="imageNamefromDataBase.jpg"> Image </a>
<div class="modal fade" id="checkImage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" style="color:black;" id="myModalLabel">View Image</h4>
</div>
<div class="modal-body" style="color:black;">
<h1>Fee Submit</h1>
<img src="#" alt="bank_chalan" id="thanks" />
</div>
<div class="modal-footer">
<button type='submit' data-dismiss="modal" name='submit' class='btn btn-success'>Close</button>
</div>
</div>
</div>
</div>
推荐答案
如果你想将图像包含在bootstrap模态中,请尝试这样的事情。
If you want to include image(s) into bootstrap modal, try something like this.
<a id = 'checkImage' >Image</a>
<div id = 'imagemodal' class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">View Image</h4>
</div>
<div class="modal-body">
<h1>Fee Submit</h1>
<img src="http://www.userlogos.org/files/logos/Karmody/alaTest_Iphone01a.png" id="imagepreview" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
在你的JS文件中,添加这个
In you JS file, add this
$(function() {
$('#checkImage').on('click', function() {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
这篇关于如何在模态中传递data-attribute的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文