We Keep Coding

onClick event using Jquery

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
link

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/

append a div with class "modal-trigger" using jquery.append() not working

i have a modal named "modalcreatelist" using materializecss. the modal will triggered when some div is clicked using an a href tag.
<div id="modalcreatelist" class="modal">
<div class="modal-content">
<div class="col s12 m6 l12">
<div class="row">
<h6><b>Create a list..</b></h6>
<div class="divider"></div> <p>Title</p>
<input type="text" placeholder="Title.." id="listTitle">
<input type="hidden" id="hiddenListId" value="<?php foreach($board as $r) {echo $r->boardId;}?>">
</div>
</div>
</div>
<div class="modal-footer"> <a class="waves-effect waves-red btn-flat modal-action modal-close">Close</a> <a class="waves-effect waves-red btn-flat modal-action modal-close" onclick="createList()">Save</a>
</div>
</div>
so i use this html code to trigger the modal, this works perfectly fine
<div id="invoice-line" class="left-align white-text">
<a href="#modalcreatelist" class="modal-trigger white-text">Add a List..
</a>
</div>
however when i move the code to my javascript file, i try to append the div using jquery .append()
and it is not working
the class "modal-trigger" is not loaded at all
the url is showing like 'localhost/project#modalcreatelist'
$("#divCreateList").append'(<div id="invoice-line" class="left-align white-text">Add a List..</div>')

You need to rebind modal-trigger after adding it to DOM. It works the first time cause the bind is done based on class name on document.ready. You need to add an event listener for click on modal-trigger and add the logic that opens your modal.
That means, after adding the content through JavaScript. You have to write something like.
$('.modal-trigger').on('click', function() { open modal; })
replace 'open modal' with your logic.

My lightbox won't close?

I'm trying to make a lightbox following this guide https://www.w3schools.com/w3css/w3css_modal.asp and it just won't work.
I'm trying to hide the modal div using this function
onclick="document.getElementById('id01').style.display='none'"
Are there other similar functions I could use? Im suspecting there is some sort of conflict with the theme I'm using Below is a code-snippet for the lightbox.
Open lightbox (works fine):
<div class="product-item grid-item cat-2">
<div href="#" class="item-image"
onclick="document.getElementById('id01').style.display='block'"
class="w3-button">
But closing it is the biggest pain right now... :/
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<img src="static/products/loelle/05.jpg" alt="06">
<span id="hide"
onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
</div>
</div>

Php blob image display on modal popup using JQuery

I've been trying to call a modal pop up
<div class="image content">
<div class="ui medium image">
<img style="max-width:400px;" src="" id="imgretprd">
<br/>
<div class="ui tiny images" style="width:500px;" align="left">
</div>
</div>
</div>
Now in my html
<img id="imgretprdlist{{$product->productId}}" src="data:image/png;base64,{{base64_encode($image_prod->Blob1)}}"/>
I wanted to call the image that is retrieved here on the modal pop up above on my click function.
I tried using this code
var ret_prodImg = document.getElementById('imgretprd');
ret_prodImg = document.getElementById('imgretprdlist'+id).src;
But that's not working. It shows me blank only. Where am I going wrong?
Any answers to this will be appreciated.

Want to show the video by jquery but click event doesn't work

I am trying to show an video by using click event, but the click event doesn't trigger.
Here is the code:
<div id="video-section">
<div class="radial-progress">
<div class="r-circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
</div>
<div class="inset">
<i class="fa fa-caret-right"></i>
</div>
</div>
<iframe src="//player.vimeo.com/video/92371445"></iframe>
</div> <!-- end video-section -->
And this is my jquery codes
$('#video-section .radial-progress').on('click', function() {
$('#video-section > iframe').show();
});
You can see my live example here, it doesn't works for showing video.
Updated: I fixed myself. What happened is when I put the code in the last js file, there is another js get errors so it can't load this code. I also added a little code to make it play when play button is clicked.