Develop Reference

Modal Popup scrolls the background to the top

I have updated the previous issue and now this is the new issue I've encountered.
On http://www.christianluneborg.com website. Click on 'Website' link and then click on the 'Pure Network' image. You will notice the modal pops up and the background of the page scrolls back up to the home page. How do I stop that? It needs to stay on the 'Website' section of the page.
HTML -
<div class="image-wrap">
<img src="img/img2.jpg" alt="Pure Network">
</div>
Modal -
<div id="Modal-Pure">
<img src="img/website151.jpg" alt="" />
</div>
<div id="fade" onClick="lightbox_close();"></div>
CSS -
#fade {
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.4;
opacity:.50;
filter: alpha(opacity=50);
}
#Modal-Pure {
display: none;
position: fixed;
top: 25%;
left: 35%;
width: 836px;
height: 636px;
margin-left: -150px;
margin-top: -100px;
background: #000;
z-index:1002;
overflow:hidden;
}
Javascript -
<script>
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
lightbox_close();
}
}
function lightbox_open(){
document.getElementById('Modal-Pure').style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close(){
document.getElementById('Modal-Pure').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>

Instead of triggering the modal using data-attributes, do it using JavaScript.
var myModal = $('#myModal');
$('img').click(function(){
myModal.find('img').attr('src', this.dataset.src);
myModal.modal('show');
});
#myModal img {
max-width: 300px;
}
<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"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<img src="https://cdn.pixabay.com/photo/2017/03/26/10/33/stone-goat-2175189__340.jpg" data-src="https://cdn.pixabay.com/photo/2017/03/26/10/33/stone-goat-2175189_960_720.jpg" width="100" alt="goat">
<img src="https://cdn.pixabay.com/photo/2017/03/17/04/07/beautiful-2150881__340.jpg" data-src="https://cdn.pixabay.com/photo/2017/03/17/04/07/beautiful-2150881_960_720.jpg" width="150" alt="beauty">
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img />
</div>
</div>
</div>
</div>
Side-remark: id attribute should not be a number. Better to use data-attribute e.g. data-id to store the number. If you need to access it in the JS code, you would do this.dataset.id.

I finally solved the problem. I added a line of JS to stop background going to the top page when modal pops up.
document.body.style.overflow='hidden';
And added a line to enable the scrolling after hitting close link.
document.body.style.overflowY='visible';

I am trying to write a function for a button which can open multiple modals in javascript

I am trying to create a page with multiple modals on but for each modal i am creating a button with a function attached with onclick() to open them.
Is there a way which I could write one function which could then open any of the modals on page depending on the container the button is in?
Here is my example code.
<div>
<button type="button" onclick="showModal1()">Open Modal</button>
<div id="overlay"></div>
<div class="modal" id="modal1">
<span class="close" onclick="hideModal1()"></span>
<p>modal content</p>
</div>
</div>
<div>
<button type="button" onclick="showModal2()">Open Modal</button>
<div id="overlay"></div>
<div class="modal" id="modal2">
<span class="close" onclick="hideModal2()"></span>
<p>modal content</p>
</div>
</div>
js
function showModal1() {
document.getElementById("modal1").style.display = "block",
document.getElementById("overlay").style.display = "block"
}
function hideModal1() {
document.getElementById("modal1").style.display = "none",
document.getElementById("overlay").style.display = "none"
}
function showModal2() {
document.getElementById("modal2").style.display = "block",
document.getElementById("overlay").style.display = "block"
}
function hideModal2() {
document.getElementById("modal2").style.display = "none",
document.getElementById("overlay").style.display = "none"
}

Here is a way.
<button type="button" onclick="showModal(1)">Open Modal</button>
<div id="overlay"></div>
<div class="modal" id="modal1">
<span class="close" onclick="hideModal(1)"></span>
<p>modal content</p>
</div>
<button type="button" onclick="showModal(2)">Open Modal</button>
<div id="overlay"></div>
<div class="modal" id="modal2">
<span class="close" onclick="hideModal(2)"></span>
<p>modal content</p>
</div>
js
function showModal(modal_no) {
document.getElementById("modal"+modal_no).style.display = "block",
document.getElementById("overlay").style.display = "block"
}
function hideModal(modal_no) {
document.getElementById("modal"+modal_no).style.display = "none",
document.getElementById("overlay").style.display = "none"
}

If you're able to use jQuery, you can bind an event handler to the "click" JavaScript element using the .click() method, and you can find nearby elements using .siblings() and .parent() (among others). This way, you just need to define one binding for each of the modal opening class and the modal closing class, and use their context to determine which modal to open and close. Note that $(this) captures the specific element that was clicked on.
$(function() {
$('.modal-open').click(function() {
$(this).siblings('.modal').add('#overlay').show();
});
$('.modal-close').click(function() {
$(this).parent('.modal').add('#overlay').hide();
});
});
.modal {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: none;
z-index: 100;
background: #fff;
min-width: 300px;
padding: 10px;
}
.modal-close {
cursor: pointer;
float: right;
}
#overlay {
opacity: 0.4;
background-color: #000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display:none" id="overlay"></div>
<div>
<button class="modal-open">Open Modal #1</button>
<div style="display:none" class="modal">
<span class="modal-close">x</span>
<p>Modal #1 content</p>
</div>
</div>
<div>
<button class="modal-open">Open Modal #2</button>
<div style="display:none" class="modal">
<span class="modal-close">x</span>
<p>Modal #2 content</p>
</div>
</div>
Note: In order for .siblings('.modal') to work correctly here, the button and modal should be placed within their own <div> element, or you run the risk that the button could be siblings with two elements with the modal class.
You could also do this with vanilla JavaScript using .addEventListener. You'll have to get sibling and parent elements in a different way, of course.

Here's a simple example thet does what you asked for, using only one function. Of course, one could (and should) try to make it even more generic like thesublimeobject did in his answer, getting rid of "onclick" to separate HTML and script.
function showModal(modalId) {
document.getElementById("modal" + modalId).style.display = "block",
document.getElementById("overlay").style.display = "block"
}
function hideModal(modalId) {
document.getElementById("modal" + modalId).style.display = "none",
document.getElementById("overlay").style.display = "none"
}
.modal {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: none;
z-index: 100;
background: #fff;
min-width: 300px;
padding: 10px;
}
.modal .close {
cursor: pointer;
float: right;
}
#overlay {
display: none;
opacity: 0.4;
background-color: #000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
}
<div id="overlay"></div>
<button type="button" onclick="showModal(1)">Open Modal</button>
<div class="modal" id="modal1">
<span class="close" onclick="hideModal(1)">X</span>
<p>modal content</p>
</div>
<button type="button" onclick="showModal(2)">Open Modal</button>
<div class="modal" id="modal2">
<span class="close" onclick="hideModal(2)">X</span>
<p>modal content</p>
</div>

First, put a class of some sort on all of your buttons; let's say modal__trigger. Then assign each of them some sort of dynamic data-attribute; let's say, for example,
<button class="modal__trigger" data-modal="modal--id">Button</button>
Now, for each modal, assign a matching ID:
<div class="modal" id="modal--id">Content</div>
Now, all you need to do is add listeners with whatever events you want, like open, close, etc.
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', open.bind(buttons[i]))
}
function open() {
let id = this.getAttribute('data-modal')
let modal = document.getElementById(id)
modal.classList.add('modal--visible')
}
function close() {
(however you want to close the modal, using the same sort of logic)
}
This is an extremely simplified version that will work in a base case. I have a much more complex library written for our internal team if you would like me to link you to it, but I don't know if it's necessary at all in this case.

Responsive Bootstrap modal without page scrollbars

I have this jsFiddle: http://jsfiddle.net/jsFiddlePlayer/8XdVt/338/
The Bootstrap modal needs to fill most of the page, be placed 100px from the top of the page and not cause the page to scroll. In other words, the entire modal needs to show in the display area. It also has a background image that needs to fit the modal in responsive fashion.
I've used this SO post to help, along with this article. But how do you limit the modal to the display area without scrollbars and keep the background image responsive? As you notice, in some screen sizes, the modal cuts off the people in the picture at the knees.
The solution can include jQuery so it doesn't have to be pure CSS. Thanks.
Here's the HTML:
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#onload-popup">
Launch modal
</button>
<div class="modal fade" role="dialog" aria-hidden="true" id="onload-popup">
<div class="modal-dialog center-block">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
Content goes here.
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Here's the CSS:
.modal {
top:100px;
}
.modal-backdrop {
top:100px;
}
.modal-dialog {
width: 95%;
height: 100%;
padding: 0;
}
.modal-content {
min-height: 100%;
height: auto;
border-radius: 0;
overflow:auto;
background-size: cover;
background-image: url('data:image/jpg;base64, /* ... image code ... */');
background-repeat: no-repeat;
background-attachment: local;
background-position: center center;
}
Update: Here's close to a solution: http://jsfiddle.net/jsFiddlePlayer/8XdVt/341/ It still doesn't play nice with the background image of the modal, as it gets clipped, but I don't think there's any way around that.

Well, you need some viewport space to display the image correctly, don't know if this can help but here are the changes I made to remove scrollbars and to top-center the image (so it cannot have heads cut-off)
.modal {
top:100px;
overflow: hidden;
overflow-y: hidden;
}
.modal-content {
background-position: top center;
}

Try changing some of this css. Still there is some background image at bottom.
.modal {
top:7%;
}
.modal-backdrop {
top:10%;
}
.modal-dialog {
width: 100%;
height: 100%;
padding: 0;
}

If you want to do it on webkit you can use
.modal.fade.in::-webkit-scrollbar{
display:none
}
But I'm not sure is it possible to do it on IE using differeng way, and there is another solution;
.modal.fade.in{
overflow-y:hidden;
}
If you use second option, you should play some possition of modal to make it visible completely.

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.

Close loading overlay with javascript

Following is the Twitter Bootstrap snippet which I am trying to close from javascript after 5 second but I was unable to do that. Kindly let me know how can I close it.
Currently its closing when a user clicks on this button:
<button type="button" class="close" style="float: none;" data-dismiss="modal" aria-hidden="true">×</button>
http://bootsnipp.com/snippets/featured/centered-processing-modal
<!-- Static Modal -->
<div class="modal modal-static fade" id="processing-modal" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="text-center">
<img src="http://www.travislayne.com/images/loading.gif" class="icon" />
<h4>Processing... <button type="button" class="close" style="float: none;" data-dismiss="modal" aria-hidden="true">×</button></h4>
</div>
</div>
</div>
</div>
</div>
.modal-static {
position: fixed;
top: 50% !important;
left: 50% !important;
margin-top: -100px;
margin-left: -100px;
overflow: visible !important;
}
.modal-static,
.modal-static .modal-dialog,
.modal-static .modal-content {
width: 200px;
height: 200px;
}
.modal-static .modal-dialog,
.modal-static .modal-content {
padding: 0 !important;
margin: 0 !important;
}
.modal-static .modal-content .icon {
}

Without wanting to read the docs for you, here's the quick and dirty solution for the one in the link.
setTimeout(
function(){
$('#processing-modal button.close').click();
},
5000
);
If you want more granular control, you'll have to read the docs. This is intended to finish when some data process that it's bound to somehow is finished. That's probably somehow tied to a custom attribute and triggering an event or something.