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.

onClick doesn't work When using Internet Explorer

I'm trying to show a Modal Box , I have an Image That When user Clicks on it , it will show The Modal Box,
it Works perfectly when using Chrome , but unfortunately it fails when using IE.
HTML :
<div id="pin" class="tooltip">
<img onclick="document.getElementById('modal').style.display='block'"
src="pin.png" width="40" height="40">
<span class="tooltiptext">Show</span>
</div>
<div class="gallery animate" id="modal">
<div class="content">
<span class="close" onclick="document.getElementById('modal').style.
display='none'">×</span>
</div>
</div>

Instead wrap the document.getElementById('modal').style.display='block'
In a Js function and then call the function in onclick event

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.

Does bootstrap-modal.js require additional javascript?

I'm experiencing issues with twitter's bootstrap-modal javascript.
I'm just using the same code they have on their page
<!-- sample modal content -->
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-header">
×
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Primary
Secondary
</div>
</div>
and then
<button data-controls-modal="modal-from-dom" data-backdrop="true"
data-keyboard="true" class="btn primary">Launch</button>
Of course, when I click on my Launch button nothing happens. Am I supposed to add something to a script.js file?
In my header I am loading jquery, bootstrap and a bunch of other stuff. Should my code work, or is there anything I didn't do correctly?
thx for any answer

Are you initializing it like this?
$('#modal-from-dom').modal(options)