Develop Reference

Modal does not close, when clicked

So I have a menu, where models pop-up on click. In each model, there's a close button, marked by an "x". Only problem is, that the model does not close, when the "x" is clicked.
I have tried multiple ways of filing this seemingly simple problem. But with no luck.
I have tried, using a z-index property, I have tried fiddling with the divs. I have tried to link to bootstrap external links. I have tried different kind of "close" button. I have tried to modifying the javascript code. Still I have not arrived at the desired outcome. Can anyone help ?
Here's my code
window.onload = function () {
list = document.querySelectorAll(".Project");
for (let i = 0; i < list.length; i++) {
list[i].addEventListener("click", function (e) {
e.preventDefault();
let currentElement = e.target.parentNode;
let modalId = currentElement.dataset.modal;
let modal = document.getElementById(modalId);
modal.style.display = "block";
});
}
};
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<li class="Project" data-modal="myModal_1">
<span id="myBtn_1"> Wer Baut Der Stadt </span>
<span id="year"> 2019 </span>
<div class="Describtion">
<p style="display:none;">
Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
</p>
</div>
<div id="myModal_1" class="modal">
<div class="modal-content">
<img src="Images/WER BAUT 2018/HVIDAktiv 20.png" width="1000px">
<span class="close">× </span>
<p> Some text in the Modal..1 </p>
</div>
</div>
</li>

It is very easy to use modal in Bootstrap.
You just have to make sure that, as in the example below, jquery.js, popper.js and bootstrap.js are placed in order.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

this is because you have a bad use of JS event delegation.
the corect way is tu use the matches method https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
like this :
window.onload = function () {
list = document.querySelectorAll(".Project");
document.querySelectorAll(".Project").forEach(LIelm=>{
LIelm.addEventListener('click', showHideModal)
})
};
function showHideModal(e) {
if (!e.target.parentNode.matches('.Project , .modal-content' )) return
e.preventDefault();
let currentParent = e.target.parentNode;
if (currentParent.matches('.Project') ){
document.getElementById( currentParent.dataset.modal ).style.display = "block";
}
else {
currentParent.parentNode.style.display = "";
}
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<li class="Project" data-modal="myModal_1">
<span id="myBtn_1"> Wer Baut Der Stadt ee</span>
<span id="year"> 2019 </span>
<div class="Describtion">
<p style="display:none;">
Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
</p>
</div>
<div id="myModal_1" class="modal">
<div class="modal-content">
<img src="https://picsum.photos/200/300" >
<span class="close">× </span>
<p>Some text in the Modal..1
</p>
</div>
</div>
</li>

In Safari the center of the 3D Carousel is not right, Edge, Chrome is working fine

I'm using the Guid here: https://www.sitepoint.com/building-3d-rotating-carousel-css-javascript/, it works fine but not in safari. I try to find out what Safari does different to other Browser in this case. I guess a certain Math function like: theta = 2 * Math.PI / numImages,in Safari creates another reference to find a center in 3D space, z axis.
I can't really dig much deeper myself. I should try to move the object bit more far from Screen on z axis
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head
<body>
<div class="carousel">
<figure>
<img src="https://source.unsplash.com/7mUXaBBrhoA/800x533" alt="" name="bar">
<img src="https://source.unsplash.com/bjhrzvzZeq4/800x533" alt="" name="bar1">
<img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="" name="bar2">
<img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="" name="bar3">
<img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="" name="bar4">
<img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="" name="bar5">
<img src="https://source.unsplash.com/1FWICvPQdkY/800x533" alt="" name="bar6">
<img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt="" name="bar7">
</figure>
<nav>
<button class="nav prev">Prev</button>
<button class="nav next">Next</button>
</nav>
</div>
<!-- Modal -->
<div class="modal fade" id="bar" 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">Modal Options</h4>
</div>
<div class="modal-body">
<p>Modal content..</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="bar1" 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">Modal 1 Options</h4>
</div>
<div class="modal-body">
<p>Modal 1 content..</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="bar2" 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">Modal Options</h4>
</div>
<div class="modal-body">
<p>Modal content..</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="bar3" 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">Modal 3</h4>
</div>
<div class="modal-body">
<p>Modal 3 content..</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
$('img').on('click', function(){
// $(this).css({"background-color": "yellow", "font-size": "200%"})
var name = $(this).attr('name');
// console.log(name);
$('#' + name).modal({show: true});
});
var
carousel = document.querySelector('.carousel'),
figure = carousel.querySelector('figure'),
nav = carousel.querySelector('nav'),
numImages = figure.childElementCount,
theta = 2 * Math.PI / numImages,
currImage = 0
;
nav.addEventListener('click', onClick, true);
function onClick(e) {
e.stopPropagation();
var t = e.target;
if (t.tagName.toUpperCase() != 'BUTTON')
return;
if (t.classList.contains('next')) {
currImage++;
}
else {
currImage--;
}
figure.style.transform = `rotateY(${currImage * -theta}rad)`;
}
body {
margin: 0;
font-family: "Roboto";
font-size: 16px;
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
}
.plakat {
width: 100%
}
.carousel {
padding: 20px;
-webkit-perspective: 500px;
perspective: 500px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
}
.carousel > * {
flex: 0 0 auto;
}
.carousel figure {
margin: 0;
width: 400px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
-webkit-transform-origin: 50% 50% -482.8427124746px;
transform-origin: 50% 50% -482.8427124746px;
}
.carousel figure img {
width: 100%;
box-sizing: border-box;
padding: 0 40px;
opacity: 0.9;
}
.carousel figure img:not(:first-of-type) {
position: absolute;
left: 0;
top: 0;
-webkit-transform-origin: 50% 50% -482.8427124746px;
transform-origin: 50% 50% -482.8427124746px;
}
.carousel figure img:nth-child(2) {
-webkit-transform: rotateY(0.7853981634rad);
transform: rotateY(0.7853981634rad);
}
.carousel figure img:nth-child(3) {
-webkit-transform: rotateY(1.5707963268rad);
transform: rotateY(1.5707963268rad);
}
.carousel figure img:nth-child(4) {
-webkit-transform: rotateY(2.3561944902rad);
transform: rotateY(2.3561944902rad);
}
.carousel figure img:nth-child(5) {
-webkit-transform: rotateY(3.1415926536rad);
transform: rotateY(3.1415926536rad);
}
.carousel figure img:nth-child(6) {
-webkit-transform: rotateY(3.926990817rad);
transform: rotateY(3.926990817rad);
}
.carousel figure img:nth-child(7) {
-webkit-transform: rotateY(4.7123889804rad);
transform: rotateY(4.7123889804rad);
}
.carousel figure img:nth-child(8) {
-webkit-transform: rotateY(5.4977871438rad);
transform: rotateY(5.4977871438rad);
}
.carousel nav {
display: flex;
justify-content: center;
margin: 20px 0 0;
}
.carousel nav button {
flex: 0 0 auto;
margin: 0 5px;
cursor: pointer;
color: #333;
background: none;
border: 1px solid;
letter-spacing: 1px;
padding: 5px 10px;
}
here is a codepen: https://codepen.io/scribbi/pen/ZPRzrp
it should look like this:
But it looks like that:
As we can see here: http://thenewcode.com/736/Advanced-CSS-3D-Carousel the problem already exists, Safari "displaces the transform-origin-z coordinate for the gallery, pushing it forward in the browser"
for some reason it is rotating around the center of the fifth Image, while the first image is positioned deeper in the carousel.
Another approach here: https://codepen.io/scribbi/pen/BEjJLY is functioning in these Browsers, no SCSS is used and more hardcoding needed. As well it's not yet responsive.
maybe related: -webkit-transform-style: preserve-3d not working

How do I get this Anchor tag to fill the space before the next div?

I have been trying to create a bootstrap drop down box with some additional buttons inside. I have the main functionality sorted but the aesthetics are not quite right.
The issue I am having is that the Anchor elements are not filling the space up to the buttons on the right. I have tried experimenting with different combinations of block and inline-block which I have read elsewhere should fill the space but when it does it pushes the buttons down to the next line. When I do manage to get the buttons and anchor elements on the same line the selection area for the anchor does not extend the entire way up to the buttons.
I am currently tearing my hair out trying to get it to work but am having no luck so if anyone can offer any assistance it will be greatly appreciated.
Update:
Thanks to #Matus Jurika for suggesting using calc to adjust the sizing of the anchor element.
Updated working fiddle: fiddle

I sugget using calc for width:
.anchorDiv {
display: inline-block;
width: calc(100% - 74px);
}
Working Fiddle:
https://jsfiddle.net/q3fra0bm/36/

This here is snippet for your solution. I am just using bootstrap row class.
.comboRow {
margin-bottom: 3px;
}
.comboItem {
display: block !important;
/*width: 67%;*/
}
.comboButtons {
float:right;
margin-top: 3px;
width: 74px;
display: block;
}
.comboItemContainer {
width: 100%;
display: inline-block;
}
.anchorDiv {
display: inline-block;
}
.close {
/*float: right;*/
/*margin-right: 10px;*/
}
.close .edit {
margin-right: 5px;
}
#presetDropdownButton {
position:absolute;
}
.glyphicon {
font-size: 15px;
}
#presetDropdown {
width: max-content;
}
#newPresetEntry {
width: 50%;
height: 24px;
margin-left: 18px;
padding-left: 6px;
padding-right: 6px;
}
.dropdown-menu > li > div > div > a {
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
display: block;
}
.dropdown-menu > li > div > div > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.dropdown-menu > li > div > div > a:hover {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.pl-0 {
padding-left: 0 !important;
}
.pr-0 {
padding-right: 0 !important;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<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.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="dropdown" id="presetDropdownButton">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Presets
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="presetDropdown">
<li class="comboRow">
<div class="row">
<div class="col-md-9 col-xs-9 pr-0">
<a class="comboItem" href="#" value="1">Preset 1</a>
</div>
<div class="col-md-3 col-xs-3 pl-0">
<button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;">
<span style="font-size: 18px;" aria-hidden="true">💾</span>
</button>
</div>
</div>
</li>
<li class="comboRow">
<div class="row">
<div class="col-md-9 col-xs-9 pr-0">
<a class="comboItem" href="#" value="1">Preset 2 with longer name</a>
</div>
<div class="col-md-3 col-xs-3 pl-0">
<button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;">
<span style="font-size: 18px;" aria-hidden="true">💾</span>
</button>
</div>
</div>
</li>
<li class="comboRow">
<div class="row">
<div class="col-md-9 col-xs-9 pr-0">
<a class="comboItem" href="#" value="1">Preset 3 with even longer name</a>
</div>
<div class="col-md-3 col-xs-3 pl-0">
<button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;">
<span style="font-size: 18px;" aria-hidden="true">💾</span>
</button>
</div>
</div>
</li>
</ul>
</div>

This should do the trick.
.comboItemContainer {
width: 100%;
position: relative;
}
.anchorDiv {
display: inline-block;
width: 100%;
padding: 0 80px 0 0;
}
.comboButtons {
width: 74px;
display: block;
position: absolute;
top: 0px;
right: 0px;
}
I made the container relative so that I can freely use absolute positioning on its children with a (0,0) origin relative to the container. Then I made the buttons absolute, made it top 0 and right 0. Added 100% width on the anchor and 80px padding-right.
This may look hacky but I'm not really that good in Flex and absolutely zero in Grid
This is almost certainly cross browser though

Multi Div Issues with clicking individually and affecting removable classes

I have few divs that will act like independent "buttons" with different products and services. I also created a javascript code that allows you to change the class of the subproducts for each product button. they only show if you click on a certain product. I'm experimenting two issues:
1- I need only to affect the selected one, right now, since they're called the same, is opening them all.
Also, once I open the prefered one, I want the rest to keep the Height: auto, right now they're increasing in size to the reference or the bigger one.
Someone can help me to solve this? this is my actual code:
HTML
<div id="quotingWrapper">
<div id="quotingArea2">
<div id="item">
<h4 class="itemText">Product 1</h4>
<div class="itemHidden">
<h4 class="itemText">First Option</h4>
<h4 class="itemText">Second Option</h4>
<h4 class="itemText">Third Option</h4>
</div>
</div>
<div id="item">
<h4 class="itemText">Product 2</h4>
<div class="itemHidden">
<h4 class="itemText">First Option</h4>
<h4 class="itemText">Second Option</h4>
<h4 class="itemText">Third Option</h4>
</div>
</div>
<div id="item">
<h4 class="itemText">Product 3</h4>
<div class="itemHidden">
<h4 class="itemText">First Option</h4>
<h4 class="itemText">Second Option</h4>
<h4 class="itemText">Third Option</h4>
</div>
</div>
<div id="item">
<h4 class="itemText">Product 4</h4>
<div class="itemHidden">
<h4 class="itemText">First Option</h4>
<h4 class="itemText">Second Option</h4>
<h4 class="itemText">Third Option</h4>
</div>
</div>
<div id="item">
<h4 class="itemText">Product 5</h4>
<div class="itemHidden">
<h4 class="itemText">First Option</h4>
<h4 class="itemText">Second Option</h4>
<h4 class="itemText">Third Option</h4>
</div>
</div>
<div id="item">
<h4 class="itemText">Product 6</h4>
<div class="itemHidden">
<h4 class="itemText">First Option</h4>
<h4 class="itemText">Second Option</h4>
<h4 class="itemText">Third Option</h4>
</div>
</div>
<div id="item">
<h4 class="itemText">Product 7</h4>
<div class="itemHidden">
<h4 class="itemText">First Option</h4>
<h4 class="itemText">Second Option</h4>
<h4 class="itemText">Third Option</h4>
</div>
</div>
</div>
</div>
CSS
body {
margin: 0 auto;
background-color: #fff;
}
#quotingWrapper {
width: 100%;
height: 2000px;
background-color: #662d91;
color: #fff;
position: relative;
text-align: center;
}
#quotingArea2 {
width: 90%;
background-color: pink;
position: relative;
text-align: center;
color: ;
margin:0 auto;
display: flex;
flex-flow: row wrap;
}
#item {
width: 23%;
height: auto;
font-family: 'Open Sans';
font-size:18px;
background-color: #3c1e57;
color: #fff;
cursor: pointer;
margin: 1%;
transition: all 0.2s ease;
}
#item:hover {
background-color: #492362;
}
.itemHidden {
width: 100%;
height: 0px;
position: relative;
background-color: #8345ae;
overflow: hidden;
transition: height 0.4s ease-in-out;
}
.itemHidden2 {
height: auto;
transition: height 0.4s ease-in-out;
}
.itemText {
margin: 0 auto;
padding: 5px;
font-size: 18px;
}
#media all and (max-width:1000px) {
#item {
width: 31.3%;
}
}
#media all and (max-width:650px) {
#item {
width: 48%;
}
}
#media all and (max-width:500px) {
#item {
width: 100%;
}
}
JAVASCRIPT
$('#item').click( function() {
$(".itemHidden").toggleClass("itemHidden2");
} );
Someone can guide me:)!?

You could put a function on each div
<div id="quotingWrapper">
<div id="quotingArea2">
<div id="item" onclick="f(this);">
<h4 class="itemText">Product 1</h4>
<div class="itemHidden">
<h4 class="itemText">First Option</h4>
<h4 class="itemText">Second Option</h4>
<h4 class="itemText">Third Option</h4>
</div>
</div>
and add a function that each div calls
var prevEle;
function f(ele) {
$(ele).find(".itemHidden").toggleClass("itemHidden2");
if (prevEle !== undefined) {
$(prevEle).find(".itemHidden").toggleClass("itemHidden2");
}
prevEle = ele;
}
you really need unique id's though. for some of this, the js is going through all the divs to manipulate them and there's only so much you can do.
https://jsfiddle.net/qts0Lpmq/

In Bootstrap open Enlarge image in modal

How do I open / enlarge an image in a modal using jquery / js and not data attributes?
Anytime a user inserts an image into a content editor I need it to be clickable to expand in a modal with js, so I cannot rely on the user to input data attributes they don't know how to use.
I tried:-
<a href="/myImage.png" id="pop">
<img src="/myImage.png" style="width: 400px; height: 264px;">
Click to Enlarge
</a>
jQuery :-
$("#pop").on("click", function() {
$(this).modal();
});
Do I need to add info to the jquery to pass the image source to appear in the modal?
Thank you!!!

You can try this code if you are using bootstrap 3:
HTML
<a href="#" id="pop">
<img id="imageresource" src="http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg" style="width: 400px; height: 264px;">
Click to Enlarge
</a>
<!-- Creates the bootstrap modal where the image will appear -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Image preview</h4>
</div>
<div class="modal-body">
<img src="" id="imagepreview" style="width: 400px; height: 264px;" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JavaScript:
$("#pop").on("click", function() {
$('#imagepreview').attr('src', $('#imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link
$('#imagemodal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function
});
This is the working fiddle.

I have change it little bit but still can not do few things.
I added that clicking on it close it - it was easy but very functional.
<div class="modal-dialog" data-dismiss="modal">
I also need different description under each photo. I added description in footer just to show what I need.
It need to change with every photo.
HTML
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" data-dismiss="modal">
<div class="modal-content" >
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" class="imagepreview" style="width: 100%;" >
</div>
<div class="modal-footer">
<div class="col-xs-12">
<p class="text-left">1. line of description<br>2. line of description <br>3. line of description</p>
</div>
</div>
</div>
</div>
JavaScript:
$(function() {
$('.pop').on('click', function() {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
Also it would be nice if this window will open only on 100% of screen.
Here picture inside with description have more than 100% and in become scrollable...
and if screen in much bigger than pictures it shoud stop only on orginal size. for ex. 900 px and no bigger in height.
http://jsfiddle.net/2ve4hbmm/

This plugin works great for me.
Bootstrap 3 lightbox plugin

I know your question is tagged as bootstrap-modal (although you didn't mention Bootstrap explicity either), but I love to see the simple way W3.CSS solved this and I think it is good to share it.
<img src="/myImage.png" style="width:30%;cursor:zoom-in"
onclick="document.getElementById('modal01').style.display='block'">
<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<div class="w3-modal-content w3-animate-zoom">
<img src="/myImage.png" style="width:100%">
</div>
</div>
Here is a link to the W3Schools modal image example to see the headers to make W3.CSS work.

So I have put together a very rough modal in jsfiddle for you to take hints from.
JSFiddle
$("#pop").on("click", function(e) {
// e.preventDefault() this is stopping the redirect to the image its self
e.preventDefault();
// #the-modal is the img tag that I use as the modal.
$('#the-modal').modal('toggle');
});
The part that you are missing is the hidden modal that you want to display when the link is clicked. In the example I used a second image as the modal and added the Bootstap classes.

<div class="row" style="display:inline-block">
<div class="col-lg-12">
<h1 class="page-header">Thumbnail Gallery</h1>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://onelive.us/wp-content/uploads/2014/08/flower-delivery-online.jpg" data-target="#image-gallery">
<img class="img-responsive" src="http://onelive.us/wp-content/uploads/2014/08/flower-delivery-online.jpg" alt="Short alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="If you sponsor me, I can drive this car" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
<img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Im so nice" data-caption="And if there is money left, my girlfriend will receive this car" data-image="http://upload.wikimedia.org/wikipedia/commons/7/78/1997_Fiat_Panda.JPG" data-target="#image-gallery">
<img class="img-responsive" src="http://upload.wikimedia.org/wikipedia/commons/7/78/1997_Fiat_Panda.JPG" alt="Another alt text">
</a>
</div>
</div>
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="image-gallery-title"></h4>
</div>
<div class="modal-body">
<img id="image-gallery-image" class="img-responsive" src="">
</div>
<div class="modal-footer">
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
</div>
<div class="col-md-8 text-justify" id="image-gallery-caption">
This text will be overwritten by jQuery
</div>
<div class="col-md-2">
<button type="button" id="show-next-image" class="btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
loadGallery(true, 'a.thumbnail');
//This function disables buttons when needed
function disableButtons(counter_max, counter_current){
$('#show-previous-image, #show-next-image').show();
if(counter_max == counter_current){
$('#show-next-image').hide();
} else if (counter_current == 1){
$('#show-previous-image').hide();
}
}
/**
*
* #param setIDs Sets IDs when DOM is loaded. If using a PHP counter, set to false.
* #param setClickAttr Sets the attribute for the click handler.
*/
function loadGallery(setIDs, setClickAttr){
var current_image,
selector,
counter = 0;
$('#show-next-image, #show-previous-image').click(function(){
if($(this).attr('id') == 'show-previous-image'){
current_image--;
} else {
current_image++;
}
selector = $('[data-image-id="' + current_image + '"]');
updateGallery(selector);
});
function updateGallery(selector) {
var $sel = selector;
current_image = $sel.data('image-id');
$('#image-gallery-caption').text($sel.data('caption'));
$('#image-gallery-title').text($sel.data('title'));
$('#image-gallery-image').attr('src', $sel.data('image'));
disableButtons(counter, $sel.data('image-id'));
}
if(setIDs == true){
$('[data-image-id]').each(function(){
counter++;
$(this).attr('data-image-id',counter);
});
}
$(setClickAttr).on('click',function(){
updateGallery($(this));
});
}
});
</script>

Here is a solution I'm using for Bootstrap 5.
<!-- a link that triggers modal -->
More details
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Image Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- include image here-->
<img src="images/img_example_8.png" alt="Image Title" class="img-fluid">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The top-voted solution did not work for me as it uses Bootstrap 3 and my app does not. Basically I just followed the bootstrap 5 modal documentation. I made the modal size large so the image is larger.

css:
img.modal-img {
cursor: pointer;
transition: 0.3s;
}
img.modal-img:hover {
opacity: 0.7;
}
.img-modal {
display: none;
position: fixed;
z-index: 99999;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}
.img-modal img {
margin: auto;
display: block;
width: 80%;
max-width: 700%;
}
.img-modal div {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.img-modal img, .img-modal div {
animation: zoom 0.6s;
}
.img-modal span {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
cursor: pointer;
}
#media only screen and (max-width: 700px) {
.img-modal img {
width: 100%;
}
}
#keyframes zoom {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
Javascript:
$('img.modal-img').each(function() {
var modal = $('<div class="img-modal"><span>×</span><img /><div></div></div>');
modal.find('img').attr('src', $(this).attr('src'));
if($(this).attr('alt'))
modal.find('div').text($(this).attr('alt'));
$(this).after(modal);
modal = $(this).next();
$(this).click(function(event) {
modal.show(300);
modal.find('span').show(0.3);
});
modal.find('span').click(function(event) {
modal.hide(300);
});
});
$(document).keyup(function(event) {
if(event.which==27)
$('.img-modal>span').click();
});
img.modal-img {
cursor: pointer;
transition: 0.3s;
}
img.modal-img:hover {
opacity: 0.7;
}
.img-modal {
display: none;
position: fixed;
z-index: 99999;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}
.img-modal img {
margin: auto;
display: block;
width: 80%;
max-width: 700%;
}
.img-modal div {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.img-modal img, .img-modal div {
animation: zoom 0.6s;
}
.img-modal span {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
cursor: pointer;
}
#media only screen and (max-width: 700px) {
.img-modal img {
width: 100%;
}
}
#keyframes zoom {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
Javascript:
$('img.modal-img').each(function() {
var modal = $('<div class="img-modal"><span>×</span><img /><div></div></div>');
modal.find('img').attr('src', $(this).attr('src'));
if($(this).attr('alt'))
modal.find('div').text($(this).attr('alt'));
$(this).after(modal);
modal = $(this).next();
$(this).click(function(event) {
modal.show(300);
modal.find('span').show(0.3);
});
modal.find('span').click(function(event) {
modal.hide(300);
});
});
$(document).keyup(function(event) {
if(event.which==27)
$('.img-modal>span').click();
});
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<img src="http://www.google.com/favicon.ico" class="modal-img">

If you have an editor, this mean the images are dynamically added by Javascript, so when using jQuery you need to select the image tag starting from an object that is already in page.
My answer will work for both cases: images displayed when page load and images dynamically added after by Javascript.
I am using a class that can be added and will open the image in modal.
The image:
<img src='/assets/image.png' style='width:100px;' class='imageViewBig'/>
The modal:
<div class="modal fade" id="modalImgageView" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body text-center">
<button type="button" class="btn-close bg-dark" data-bs-dismiss="modal" aria-label="Close" style="position:absolute; top:5px;right:5px;"></button>
<img src="assets/images/nophoto.png" alt="Image Title" class="img-fluid" id="modalImgageViewIMG">
</div>
</div>
</div></div>
the modal header and footer are removed
the "close" button is moved over the image in right corner
image from modal have id "modalImgageViewIMG" and is needed to change the "src" attribute
The jQuery:
$(document).on("click", ".imageViewBig", function() {
let url = $(this).attr('src');
$('#modalImgageViewIMG').attr('src', url);
$('#modalImgageView').modal('toggle');
});
click event is set on $(document)
class "imageViewBig" have a listener for "click" event and will take the "src" from the clicked image and putted to image from modal

The two above it is not run.
The table edit button:
<a data-toggle="modal" type="edit" id="{{$b->id}}" data-id="{{$b->id}}" data-target="#form_edit_masterbank" data-bank_nama="{{ $b->bank_nama }}" data-bank_accnama="{{ $b->bank_accnama }}" data-bank_accnum="{{ $b->bank_accnum }}" data-active="{{ $b->active }}" data-logobank="{{asset('components/images/user/masterbank/')}}/{{$b->images}}" href="#" class="edit edit-masterbank" ><i class="fa fa-edit" ></i></a>
and then in JavaScript:
$('.imagepreview555').attr('src', logobank);
and then in HTML:
<img src="" class="imagepreview555" style="width: 100%;" />
Not it runs.