Develop Reference

Why do i have to click twice to open a modal?

I am trying to make a button on which if we click a popup opens(modal) and it is working but only problem is i need to click it twice to open it and i don't see how can i solve it.
// Get the modal
function modal1() {
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!-- Trigger/Open The Modal -->
<button id="myBtn" onclick="modal1()">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
Thank you in advance :)
ps: I am leaning in very early stage js (beginner)

It's fairly straightforward if you read your code in order.
When you click the button, it runs the modal1() function.
This function, among other things, adds a btn.onclick listener, waiting for a click.
That's it.
So now, you have to click a second time in order to trigger the listener you just created.
The new onclick listener you create, for that matter, overrides the current onclick on the button, and I'm not sure why you do this.
The simple solution is to put modal.style.display = "block" directly in modal1(). Why override the onclick function?
function modal1() {
modal.style.display = "block";
}

Javascript code is getting executed even before user presses ok on alert window

I need to remove video element, Canvas and a button on canvas before displaying an alert window and once user presses ok button on the alert window, I need to display some other elements. Currently I am facing below issues.
alert window is getting displayed before deleting the button. So we
just used setTimeout to delete all the elements before displaying
alert window to fix this.
The UI code which should be executed after user presses 'ok' button
is getting executed after alert window display with out stopping for
user click. I thought that the code next to alert() should not be
executed until user presses Ok on alert window.
Below is Javascript code.
$("#remoteVideo").remove();
$("#localCanvas").remove();
$(".terminate_session_btn").remove();
// USED setTimeout TO DELAY THE DISPLAY OF ALERT WINDOW. WITHOUT
// setTimeout, ALERT WINDOW IS GETTING DISPLAYED BEFORE DELETING THE BUTTON.
setTimeout(function() {
displayAndProcessUserTerminateAlertDialog();
}, 200);
function displayAndProcessUserTerminateAlertDialog() {
socket.close();
alert("User terminated the video call. Press 'Ok' button to create new session.");
// BELOW CODE IS GETTING EXECUTED WITHOUT STOPPING FOR USER ACTION ON ALERT WINDOW.
$(".main_container .item").hide();
$("#video-session-menu").removeClass("active");
$("#images-menu").removeClass("active");
$(".sidebar ul li a").addClass("disabled");
}
Can anyone please help me to understand why code execution is not stopped until user presses OK on alert window and how to fix this issue.
UPDATE:
Interesting thing is if I open developer tools, the issue is not happening. If I don't open developer tools, issue is happening always. I am not sure how to fix this issue.

Apparently browsers do not have a standard behavior for alert. As a result, you might want to implement your own alert with the behavior you prefer. You can test it here: https://jsfiddle.net/rf0jd7te/1/
HTML
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Alert Window</p>
<p>
<input type="button" value="OK">
</p>
</div>
</div>
CSS
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
JS
console.log("before alert");
var modal = document.getElementById("myModal");
// Get the <span> element that closes the modal
var span = modal.getElementsByClassName("close")[0];
// Get the OK element that closes the modal
var OK = modal.querySelector("input[type=button]");
// When the user clicks on <span> (x), close the modal
function close() {
modal.style.display = "none";
console.log("after alert");
}
OK.onclick = span.onclick = function() {
close();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
close();
}
}
modal.style.display = "block";

Alert in JS is only responsible for showing message, try to use window.confirm(message) (check example use case)

Javscript: For every image click show modal with image zoom

I'm currently working on a simple image modal that should show only an image zoom with a close button.
I have a markup generated from my CMS in which the a tag can be configurated to have an extra class "lightbox" as an attribute which should then trigger the lightbox script.
However, currently it seems to only work for the first image that's loaded. When I click on another image it shows the same image source from the first one and I'm not sure how to fix it. Do all the images need to be looped over first?
My CMS generates a markupa for the images like this in the DOM (image is a placeholder):
<a href="image1.png" class="lightbox">
<img class="image-embed-item" src="image" >
</a>
<a href="image1.png" class="lightbox">
<img class="image-embed-item" src="image" >
</a>
<a href="image1.png" class="lightbox">
<img class="image-embed-item" src="image" >
</a>
In my default layout I then add the markup for the lightbox modal:
<div id="imagemodal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="close">×</div>
<img src="" id="imagepreview" style="width: 100%;" >
</div>
</div>
This is the javascript code:
window.addEventListener('DOMContentLoaded', function () {
// add imageresource id to loaded image
$(".image-embed-item").attr("id", "imageresource");
// add data-toggle class to all lightbox elements
$(".lightbox").attr("data-toggle", "lightbox");
// click event for data toggle
$(document).on('click', '[data-toggle="lightbox"]', function (event) {
event.preventDefault();
// use image source from clicked image
$('#imagepreview').attr('src', $('#imageresource').attr('src'));
$('.modal').css('display', 'block');
});
$(document).on('click', $('.closeModal'), function (event) {
// close function
});
});
Here is my css:
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1000; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

You are using the same id for all .image-embed-item in:
$(".image-embed-item").attr("id", "imageresource");
And then use $('#imageresource').attr('src') to set the preview.
That's why it always show the first image in the modal. You can solve it by changing $('#imageresource').attr('src') to $(this).find('img').attr('src'). Something like this:
window.addEventListener('DOMContentLoaded', function () {
// add data-toggle class to all lightbox elements
$(".lightbox").attr("data-toggle", "lightbox");
// click event for data toggle
$(document).on('click', '[data-toggle="lightbox"]', function (event) {
event.preventDefault();
// use image source from clicked image
$('#imagepreview').attr('src', $(this).find('img').attr('src'));
$('.modal').css('display', 'block');
});
$(document).on('click', $('.closeModal'), function (event) {
// close function
});
});

trigger input file click on modal on first page load doesn't fire

Using angularJS, I have a modal that should trigger a input file in order to upload a file.
this is the function that triggers the click
function triggerUploadMethod()
{
inputFile = document.createElement('input');
inputFile.type = 'file';
inputFile.onchange = photoChosen;
inputFile.click();
}
The thing that is boring me is that on the FIRST page load, when I open the modal, the trigger is not fired. If I close the modal and open again, the trigger WORKS, and it will keep working until the next page load... What can be happening to not work on the first page load?
This only happens on Chrome. On Firefox, Edge and Internet Explorer the trigger works every time, even after a page load...

As a disclaimer I've never used Angular and since you didn't provide any of the other code, I went with vanilla JavaScript.
As far as I can tell, the error in your code is not from what you posted above. In the snippet below, I have taken code from W3Schools How to Make a Modal Box With CSS and JavaScript and then added your function to the part where it opens the modal on button click and it works fine (I'm on Chrome).
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// This variable isn't defined in your code so I just assume
// it's somewhere at the top.
var inputFile;
// When the user clicks on the button, open the modal.
// Also creates your input and clicks it.
btn.onclick = function() {
modal.style.display = "block";
triggerUploadMethod();
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Create the input element and click it.
function triggerUploadMethod() {
inputFile = document.createElement('input');
inputFile.type = 'file';
// I have no idea what this is so I can't include it.
//inputFile.onchange = photoChosen;
inputFile.click();
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>

How can I generalise code which produces a modal image to process multiple images

My end objective is to produce a web page of small images which are clickable. When clicked, a modal image of the small image is displayed.
I copied the following code from the W3Schools site:
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
/* Style the Image Used to Trigger the Modal */
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
<!-- Trigger the Modal -->
<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
I can see that the code is hard-coded to one image and I think the easiest way to achieve my goal is pass the id of the image to the js script. So I've begun modifying the html thus:
<!-- Trigger the Modal -->
<img class="images" id="img_1" src="images/Cairns1-041-3-Water-Safari.gif" alt="Water Travellers" width="300" height="200">
<img class="images" id="img_2" src="images/Cairns1-047-2-Handle-With-Care.gif" alt="Manhandle" width="300" height="200">
<!-- img_3 etc -->
Am I on the right track and if so, how do I pass the image id to the script? Part of my objective is to understand the code as much as possible rather than to just copy a plug-in.

Here's a JSfiddle I've made that shows how my answer can be merged with the question. Hopefully, it can help anyone else that's using w3schools. https://jsfiddle.net/bdneyq4s/1/
Yes, you're on the right track, although ID's aren't necessary if you set up an event observer.
You need to add the data that's needed to show the big version of the image in the modal. (If you're using the same image for the modal + the thumbnail, then don't worry about using the extra attribute)
For example, you can have something like:
<img class="modal-image" src="path/to/thumbnail.jpg" alt="Caption to show" data-bigImage="path/to/big-image.jpg" />
Then you can create an event observer that'll listen to an on-click event on all elements that use the modal-image class. From there you can grab the data-bigImage and alt attributes from the clicked on element and populate the modal's content with it.
You said you didn't want to copy and paste code so I didn't write out the Javascript that'll do it, but if you need me to, I'll edit my answer to show some examples on how it can be done.
EDIT: I've added the following snippet to show a very basic example of how it can be done. I've made an event observer for each image with the modal-image class and replace the image in the modal with the new image attributes. (You can click on the little thumbnails to see it work)
// Select all images that have the class modal-image
var image = document.getElementsByClassName("modal-image");
// to set an event observer on each element
for( var i=0; i<image.length; i++ ){
image[i].onclick = function() {
// get the two values we need from the image
// i'm using the alt as the caption
var
bigImage = this.getAttribute('data-bigImage'),
caption = this.getAttribute('alt');
replaceModalImage( bigImage, caption );
}
}
/*
* Replace the modal image's source in order to display the new image
*
* #param src Source of the new image
* #param caption Caption to show with the modal
*/
function replaceModalImage( src, caption ){
var
img = document.getElementById('big-image'),
captionContainer = document.getElementById('caption');
img.setAttribute('src', src);
img.setAttribute('alt', caption);
captionContainer.innerHTML = caption;
}
.modal-image{
/* this is just to make it small like a thumbnail, use a small image in production */
width: 100px;
}
img{
max-width: 100%;
}
#modal{
background: #999;
width: 600px;
padding: 20px;
}
<!-- thumbnail container -->
<div class="thumbnails">
<!-- src = small image, data-bigImage = big image src -->
<img class="modal-image" src="http://vignette4.wikia.nocookie.net/geometry-dash/images/4/4b/GearSawblade01.png" alt="Caption to show" data-bigImage="http://simpleicon.com/wp-content/uploads/gear-8.png" />
<img class="modal-image" src="https://ak1.ostkcdn.com/images/products/6626651/6626651/Cottage-Oak-Dining-Table-P14192779.jpg" alt="Caption to show" data-bigImage="http://www.ikea.com/PIAimages/0106117_PE253936_S5.JPG" />
</div>
<!-- modal html -->
<div id="modal">
<div id="image"><img id="big-image" src="" alt="" /></div>
<div id="caption"></div>
</div>