[英]how to pass data-attribute in modal
I need to pass the data attribute in my modal.我需要在我的模式中传递数据属性。 to attach with image tag in src When clicked on the link.单击链接时,在 src 中附加图像标签。 Below is my code.下面是我的代码。 I am confused.我很迷惑。 I know we can use JavaScript onclick method to pass by reference.我知道我们可以使用 JavaScript onclick 方法按引用传递。 Still can anyone give me executable code.任何人都可以给我可执行代码。 My code is below.我的代码如下。 I am not really good in making JavaScript functions.我不太擅长制作 JavaScript 函数。
<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>
you can use bootstrap modal event listener show
or shown
and pass the data attribute value to <img>
您可以使用引导模式事件侦听器show
或shown
并将数据属性值传递给<img>
$('#checkImage').on('show.bs.modal', function (e) {
var img = $(e.relatedTarget).data('myimage');
//alert(img);
$("#thanks").attr("src",img);
});
Working Example工作示例
$('#checkImage').on('show.bs.modal', function (e) { var img = $(e.relatedTarget).data('myimage'); //alert(img); $("#thanks").attr("src", img); });
<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="http://tympanus.net/Tutorials/CaptionHoverEffects/images/1.png" class="btn btn-default"> 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>
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>
In you JS file, add this在你的JS文件中,添加这个
$(function() {
$('#checkImage').on('click', function() {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.