We Keep Coding

PrePended button to multiple divs does not open popin for all

I have a button that tiggers a popin. I appended it to a div and then preppended that div to all divs with the same class.
My problem is that only the last button prepended triggers the popin. The other buttons dont seem to work.
Can anyone help me?
JSFiddle Here
// 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];
// 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";
}
}
$(window).on('load', function() {
function topBannerCaps() {
if ($('#container').css('display') == 'block') {
$('#myBtn').appendTo('#container');
}
$('#container').prependTo('.test-div');
}
requestAnimationFrame(topBannerCaps);
});

Couple of problem in your code.
Id must be unique so use class on button instead of id when append.
Don't mismatch JavaScript and jQuery.
Avoid inline class if possible.
Working Fiddle:
// Get the modal
var modal = $("#myModal");
// Get the button that opens the modal
var btn = $(".myBtn");
// Get the <span> element that closes the modal
var span = $(".close");
// When the user clicks the button, open the modal
btn.on("click", () => {
$(modal).css("display", "block")
});
// When the user clicks on <span> (x), close the modal
span.on("click", () => {
$(modal).css("display", "none")
});
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
$(modal).css("display", "none")
}
}
$(window).on('load', function() {
function topBannerCaps() {
if ($('#container').css('display') == 'block') {
btn.appendTo('#container');
}
$('#container').prependTo('.test-div');
}
requestAnimationFrame(topBannerCaps);
});
.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Trigger/Open The Modal -->
<button class="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>
<div id="container" style="display: block"></div>
<div class="example">
<div class="test-div">Example DIV</div>
<div class="test-div">Example DIV</div>
<div class="test-div">Example DIV</div>
<div class="test-div">Example DIV</div>
<div class="test-div">Example DIV</div>
<div class="test-div">Example DIV</div>
</div>

How to make div modal scrolled to the top each time I open it?

I have built a modal by pure html, CSS, javascript.
It would pop-up as I click a button on the main page.
However, if I scroll down the model and close it, it would show the scrolled-down view as I reopen it. How can I make it always show the content at the top each time I open the model?
Here is my code:
<div class="button" id="btn"></div>
<div class="modal" id="mymdl">
<div class="modal-content" id="mdl-con">
<div class="modalwidth">
<img class="image-title" id="img-ttl" src="./img/banner.png">
<span class="close" aria-hidden="true">×</span>
</div>
<div class="paragraph">
Here is the main content.
</div>
</div>
</div>
document.getElementById('btn').addEventListener('click', function(e) {
modal.style.display = "block";
});
var closeX = document.getElementsByClassName("close")[0];
closeX.onclick = function() {
modal.style.display = "none";
}
I have tried window.scroll method provided in the solution of this problem, but it didn't solve my problem.
I'm new to html, css, and javascript. Any idea would be appreciated! Thanks in advance.

Here's one way, rather than scroll to the top, bring the modal top to you.
document.getElementById('btn').addEventListener('click', function(e) {
modal.style.display = "block";
modal.style.top = window.pageYOffset + 10 + "px";
});
const modal = document.querySelector('.modal')
const btns = document.querySelectorAll('.btn');
for (let x = 0; x < btns.length; x++) {
btns[x].addEventListener('click', function(e) {
modal.style.display = "block";
modal.style.top = window.pageYOffset + 10 + "px";
console.log(window.pageYOffset, modal.style.top);
});
}
.container {
height: 1000px;
}
.btn {
display: inline-block;
margin-top: 400px;
}
.modal {
padding: 20px;
position: absolute;
width: 200px;
background: rgba(0, 0, 0, .5);
color: #fff;
}
<div class='container'>
<div class='modal'>Modal</div>
<button class='btn'>click</button>
<hr>
<button class='btn'>click</button>
</div>

You can use element.scrollTop = 0 to scroll it to the top.
For example if .paragraph is what's getting scrolled, you can use something like this:
const modal = document.getElementById("mymdl");
document.getElementById('btn').addEventListener('click', function(e) {
modal.style.display = "block";
});
var closeX = document.getElementsByClassName("close")[0];
closeX.onclick = function() {
modal.querySelector(".paragraph").scrollTop = 0; //scroll to the top
modal.style.display = "none";
}
.modal
{
position: fixed;
}
.modal-content
{
border: 1px solid black;
}
.paragraph
{
overflow: auto;
height: 50vh;
white-space: pre;
text-align: center
}
.paragraph > div
{
height: 120%;
}
.paragraph > span
{
position: relative;
bottom: 0;
}
.button,
.close
{
cursor: pointer;
}
<div class="button" id="btn">open modal</div>
<div class="modal" id="mymdl">
<div class="modal-content" id="mdl-con">
<div class="modalwidth">
<img class="image-title" id="img-ttl" src="./img/banner.png">
<span class="close" aria-hidden="true">×</span>
</div>
<div class="paragraph">
<div>Here is the main content.
scroll down</div><span>bottom</span>
</div>
</div>
</div>

How to make konami code open a modal that enables/disables dark mode (and has a close button)? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
So I tried to make a Modal that opens up typing in the Konami code(↑↑↓↓←→←→BA). This is what I have tried so far(I'm a newbie to JS so plz don't be mean. btw I have the code set but I need the modal. Look into code for more details.):
var pattern = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
var current = 0;
var keyHandler = function (event) {
// If the key isn't in the pattern, or isn't the current key in the pattern, reset
if (pattern.indexOf(event.key) < 0 || event.key !== pattern[current]) {
current = 0;
return;
}
// Update how much of the pattern is complete
current++;
// If complete, alert and reset
if (pattern.length === current) {
current = 0;
// Modal with dark mode option and light mode (if dark mode is already turned on(optional)).
}
};
// Listen for keydown events
document.addEventListener('keydown', keyHandler, false);
<h1> Enter the Konami code. (↑↑↓↓←→←→BA) for a surprise.

Taken directly from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal
No credit to me just a copy and paste
var pattern = [
"ArrowUp",
"ArrowUp",
"ArrowDown",
"ArrowDown",
"ArrowLeft",
"ArrowRight",
"ArrowLeft",
"ArrowRight",
"b",
"a"
];
var current = 0;
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];
var keyHandler = function (event) {
// If the key isn't in the pattern, or isn't the current key in the pattern, reset
if (pattern.indexOf(event.key) < 0 || event.key !== pattern[current]) {
current = 0;
return;
}
// Update how much of the pattern is complete
current++;
// If complete, alert and reset
if (pattern.length === current) {
modal.style.display = "block";
current = 0;
// Modal with dark mode option and light mode (if dark mode is already turned on(optional)).
}
};
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";
}
};
// Listen for keydown events
document.addEventListener("keydown", keyHandler, false);
.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;
}
<h1> Enter the Konami code. (↑↑↓↓←→←→BA) for a surprise.</h1>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>

I have to open modal dialog with on click function (JQUERY and Bootstrap ) not working

I have appended the images via javascript function and JQUERY, everything is working .But now i need to add "on click" event on every image . When i click on some image there should the same photo but bigger with a modul dialog. But it does not working. I do somehting wrong somewhere .
Tried with JQUERY "on click" function and as well with Bootstrap , but since give the appened images an ID which is taken from the array JSON object "title" property. I was not sure how to refer to it .
<div id="imageContainer"></div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id=img01>
<div id="caption"></div>
</div>
</div>
</div>
#imageContainer img {
width: 30%;
height: 250px;
padding: 10px;
border: 5px solid grey;
}
#myModal{
display:none;
}
.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: 50%; /* Full width */
height: 50%; /* 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: 50%;
max-width: 200px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
(function (){
const arrayImg = [
{
filename: "20140222_131314",
title:"img1",
},
{
filename:"20140712_203709",
title:"img2",
},
{
filename:"20190318_182928",
title:"img3"
},
{
filename:"20190422_181219",
title:"img4"
}
]
for (let i = 0 ; i< arrayImg.length ; i++) {
const arrImg = arrayImg[i]
const imageContainer = $("#imageContainer");
imageContainer.append(`<img id=${arrImg.title} src=photos/${arrImg.filename}.jpg>`);
}
/*
array_img.forEach()
*/
}());
let modal = $('#myModal')
let modalImg = $('#img01')
let $img = $("#imageContainer img");
$img.click(function(test){
$('.modal').css('display',"block");
modalImg.src = this.src
let span = document.getElementsByClassName("close")[0];
span.onclick = function() {
$('.modal').css('display',"none");
}
})
///OR
let modal = document.getElementById('myModal')
let modalImg = document.getElementById('img01')
let img = document.getElementsByTagName(" img");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
But i am not sure that let modalImage is refered to correctly.

You have this CSS rule:
#myModal{
display:none;
}
also try control the modal visibility is JS with CSS clases and visibility, it's your error. The behaviour to show and hide is automatic in bootstrap modal, please review documentation and examples as this: https://www.w3schools.com/bootstrap/bootstrap_modal.asp

I made it like that and it works.
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content">
</div>
let $modal = $('.modal')
let $img = $("#imageContainer img");
$img.click(function(){
$('.modal-content').attr('src', $(this).attr('src'));
$modal.css('display', 'block')
let $span = $(".close");
$span.click(function() {
$('.modal').css('display',"none");
})
})

I have another issue similar to that and again i am stuck .
If someone can show me my mistake , it will be great as i can NOT see it .
I have a image gallery again with every image in a separate <div> with same class name and i need to access the image on click and open a modal dialog with the selected image (bigger)
<div id="imageContainer">
<div class="imgBox">
<img class="jsonImage" id="image_id_001" src="Photos/_DSC0150.jpg">
<p>Title001</p>
</div>
<div class="imgBox">
<img class="jsonImage" id="image_id_002" src="Photos/_DSC0226.jpg">
<p>Title002</p>
</div>
<div class="imgBox">
<img class="jsonImage" id="image_id_001" src="Photos/_DSC0150.jpg">
<p>Title001</p>
</div>
<div class="imgBox">
<img class="jsonImage" id="image_id_002" src="Photos/_DSC0226.jpg">
<p>Title002</p>
</div>
<div id="myModal" class="modal">
<img id="current" class="modal-content" />
</div>
And part of my JS code for the modal Dialog :
const modal = $('#myModal'),
let image = $('.imgBox img')
image.click(function() {
modalContent.attr('src', $(this).attr('src'));
modal.css('display', 'block');
googleMap.css('display','none');
I keep getting message that `"image" is not a function'

Javascript: Avoiding multiple pop up boxes / check if div is empty

I created a pop up box that appears when a user clicks a button. Currently I am able to get the box to appear but when the user closes it and re-opens it the code is ran through again and another box is stacked on top of the old one.
What I want to do is make it so no matter how many times the user clicks the box it only shows one box... my thoughts was maybe checking if it was empty similar to How do I check if an HTML element is empty using jQuery? however that has not worked so far.
Any suggestions for a noob idiot? Appreciation for all responses in advance.
<button onclick="popup()">text</button>
<script>
var box = document.getElementById('popupbox');
function popup(){
box.style.display = "block";
var content = document.createElement('div');
content.className = 'boxstyle';
content.innerHTML = ' ...a handful of tags...';
box.appendChild(content);}
function exit(){
box.style.display = "none";}
</script>

You can create a popup using a modal as follows. I just copied code from here
<!DOCTYPE html>
<html>
<head>
<style>
/* 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;
}
</style>
</head>
<body>
<h2>Modal Example</h2>
<!-- 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>
<script>
// 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];
// 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";
}
}
</script>
</body>
</html>

I actually managed to solve it by simply tossing in box.innerHTML = '' right after the block appears so that it has a clean slate to work with. I was trying to go a little more elegant and seeking to use an If/Else statement but in the end it seems to work. Much appreciation for all who answered / commented, you all are awesome!
<button onclick="popup()">text</button>
<script>
var box = document.getElementById('popupbox');
function popup(){
box.style.display = "block";
box.innerHTML = '';
var content = document.createElement('div');
content.className = 'boxstyle';
content.innerHTML = ' ...a handful of tags...';
box.appendChild(content);}
function exit(){
box.style.display = "none";}