onClick event using Jquery

Question

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">
                    &times;</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

link

api.jquery.com/on

Taplar
– Taplar

2019-07-22 22:05:24 +00:00
Commented Jul 22, 2019 at 22:05 — Taplar
– Taplar, Commented Jul 22, 2019 at 22:05

Harshada Samant · Accepted Answer · 2019-07-23 04:11:25Z

1

You can do this using two ways:

using onClick attribute in an html. onClick="functionName()"
using click function on item class in jquery.

You can see this link for reference:

https://jsfiddle.net/audetwebdesign/rQdZR/

answered Jul 23, 2019 at 4:11

Harshada Samant

1751 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

onClick event using Jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related