I am created one project. In which first I made a hover effect on image album but now I want to make an on-click event. I am trying to make this proper but not done.
I'll give the link : http://ihannoveraner.de/servicebieter/profile.html When Click link then opens REFERENCE page. you can see hover effect on the image. that place I need click on the image and open popup
My Jquery code is:
$('.ref-img').hover(function () {
$('#MyPopup #albums a').html($(this).html());
$("#MyPopup").modal("show");
});
My Html Code:
<div id="albums"><a href="images/our/01.jpg" class="ref-img">
<div class="zoom-i">
<img class="primary" src="images/our/02.jpg">
<div class="popular-overlay">
<strong>Logo Design</strong>
</div>
</div>
<img class="secondary-1" src="images/our/03.jpg">
<img class="secondary-2" src="images/our/04.jpg">
<div class="meta">
album 1
</div>
</a>
</div>
My Modal Is:
<div id="MyPopup" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title">
</h4>
</div>
<div class="modal-body">
<div id="albums">
<a>
</a>
</div>
</div>
</div>
</div>
</div>
Above I display code. From this code on hover, image is displayed in the model but now I am trying to display modal after I click. Second, when popup open popular-overlay id is display using opacity 1 . I am trying to build like this
You can do this using two ways:
onClick="functionName()"
You can see this link for reference:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.