We Keep Coding

How to adjust JavaScript for modal window

I need to make a modal window appear when I click on the button. I wrote a post view and added a button and a W3Schools script to display the modal window. It turned out something like:
<% #posts.each do |post| %>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2 lang="ru"><%= post.title %></h2>
<p lang="ru"><%= post.body %></p>
<button id="myBtn">Open Modal</button> <!-- taken from the site -->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p><%= post.translation %></p>
</div>
</div>
</div>
</div>
</div>
<% end %>
<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 on 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>
Everything works fine, but only for the very first post. The script processes only the very first button. I think I know why this happens, but how do I fix it? It seems that getElementById is taken here when creating variables.

getElementById will only ever return the first element that matches the given id. It is generally assumed that each ID given to an element is unique. That is what is happening.
If you need to have a unique modal for each post, then you could append each id of the modal with the id of the post, this ensures they are unique.
You should also get rid of all the global variable for modal, button, span, since they are only ever referencing the same element.
Give your <button> and onclick attribute and call a function and pass in the unique id of the post, that should let you locate all the appropriate elements for that post.
<button id="myBtn_<%= post.id %>" onclick="showModal(<%= post.id %>);">Open Modal</button>
function showModal(id) {
var modal = document.getElementById("myModal_" + id);
var btn = document.getElementById("myBtn_" + id);
// show your modal and anything else that happens on click
}
You should update span to be similarly selectable instead of just having a class.
Hope that helps!

Modal with link

I use a modal I got from w3school and I modified it to put several modals on the same page.
I would like to know if I can make these modals generate their own links.
Example: I open modal 4 and the page link will change to mywebsite.com/modal4
The code I use is more or less like this
JS
// Get the modal
var modal = document.getElementsByClassName('modal');
// Get the button that opens the modal
var btn = document.getElementsByClassName("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");
// When the user clicks the button, open the modal
btn[0].onclick = function() {
modal[0].style.display = "block";
}
btn[1].onclick = function() {
modal[1].style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span[0].onclick = function() {
modal[0].style.display = "none";
}
span[1].onclick = function() {
modal[1].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";
}
}
HTML
<h2>Modal Example1</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn" class="myBtn">Open Modal1</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..1</p>
</div>
</div>
<h2>Modal Example2</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn" class="myBtn">Open Modal2</button>
<!-- The Modal -->
<div id="myModal2" class="modal">
<!-- Modal content -->
<div class="modal2-content">
<span class="close">×</span>
<p>Some text in the Modal..2</p>
</div>
</div>

You can change the current URL of the page when opening the modal, as seen in this answer: Modify the URL without reloading the page. To load the modal if you go to mywebsite.com/modal4, you can write some js logic to get the link, see if it addresses a modal, and then open that modal.
You may have to write some backend code to handle links like that, however, you can try to pass link parameters and then use js to parse the parameters out of the link string: How to get the value from the GET parameters?
As JagdeeshKumar pointed out below, you can also navigate to website.com/htmlpage.html#modal4, and you can use js to get that location and load up the modal. See https://www.w3schools.com/jsref/prop_loc_hash.asp

you can use
your URL will be like root/#modal4window.location.hash = 'something';

Modal for multiple images:

I looked around at the answers on such questions and couldn't understand anything. Deeply appreciated if you can help:
I have some pictures on a website. I want the modal to work such that when a picture is clicked it appears in a larger size.
The Problem: The code only works for the first image. When I click in the second image, nothing happens. I HAVE looked around and seen some answers pointing out that having the same id for different images is the problem but I couldn't understand how to fix this issue.
The Other Problem: I have JS code for a slide show and JS code for the modal. However, if the code for the modal comes in first, the code for the slideshow doesnt work, and vice-versa
I copied the code from W3Schools:
HTML HERE
<!-- Trigger the Modal -->
<img id="myImg" src="assets/img/work/amigurumi/cerdo/main.JPG" alt="Cerdito" width="360">
<!-- 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>
<p>Cerdito 1</p>
</div>
<div class="col-lg-4">
<!-- Trigger the Modal -->
<img id="myImg" src="assets/img/work/amigurumi/cerdo/P1140064.JPG" alt="Problema con imagen" width="360">
<!-- 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>
<p>Cerdito 2</p>
</div>
JS HERE - Note I've put down the JS code for the modal and for a slideshow because I'm having a connected problem. JS only works for the code which appears first (so if the slide show code is after the modal code, slide show doesnt work...)
// IMAGE MODAL DAVID 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";
}
//Slideshow DAVID
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}

In the name of your modal question you must like this solution, I imagine. I posted an answer here to a similar question few days ago. Go to :
Add next and previous buttons when the I open the modal
Good luck

How to open 2 different modals with 2 different buttons

I have the following code and i am trying to open 2 different modals in each separate link.
modal link 1 -> open modal1
modal link 2 -> open modal2
<p data-height="265" data-theme-id="0" data-slug-hash="gWKOmP" data-default-tab="css,result" data-user="pansotdev" data-embed-version="2" data-pen-title="2 modals" class="codepen">See the Pen 2 modals by Sotiris Panagopoulos (#pansotdev) on CodePen.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

https://codepen.io/anon/pen/OGdXXr
I correct your code I will let you play with the last function cos you have to determine exactly where we must click (which element) to close your modals.
also, one ID must be unique you can have the same id on a different element.
as you look beginner I think, it is the easier way I could make for you.
if you need more explanation let me know.
if the link doesn't work,
your HTML corrected:
<!-- The 1st button -->
<a id="myBtn1" href="#" class="copy_code" rel="nofollow">open modal 1</a>
<!-- The 2nd button -->
<a id="myBtn2" href="#" rel="nofollow">open modal 2</a>
<!-- The 1st Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h1 class="page-title">modal1</h1>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
<!-- The 2nd Modal -->
<div id="myModal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h1 class="page-title">modal2</h1>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
then your JavaScript corrected:
// Get the modal
var modal1 = document.getElementById('myModal1');
var modal2 = document.getElementById('myModal2');
// Get the button that opens the modal
var btn1 = document.getElementById("myBtn1");
var btn2 = document.getElementById("myBtn2");
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("close")[1];
// set modal as hidden
modal1.hidden = true;
modal2.hidden = true;
// When the user clicks the button, open the modal
btn1.onclick = () => {
return modal1.hidden = false;
}
btn2.onclick = () => {
return modal2.hidden = false;
}
// When the user clicks on <span> (x), close the modal
span1.onclick = () => {
return modal1.hidden = true;
}
span2.onclick = () => {
return modal2.hidden = true;
}
// When the user clicks anywhere outside of the modal, close it //that's the logic
window.onclick = (event) =>{
if(modal1 || modal2 != false){
return modal1 && modal2 == true
}
}
see ya

Subscribe Confirmation Required?

I want to make a video site. Where Users can play video. But the problem is when users want to play video they need to subscribe my youtube channel then they can play videos. I made a modal when users click on play video the modal will ask to subscribe my channel. Now i need that when users subscribe my channel they will redirect to the video page and they can play the videos.
Anyone can help me about it...
html code is here
<h2>Bottom Modal</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<h2>Verify By Subscribing Us</h2>
<button onclick="myFunction()">Subscribe</button><br><br>
</div>
<div class="modal-footer">
<input type="submit" value="Confirm Subscription" class="confirm">
</div>
</div>
</div>
The modal js code is here
// Get the modalM
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("confirm")[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";
}
}
function myFunction() {
var myWindow = window.open("https://www.youtube.com/channel/UCODLiqqTQZcQxiBLNeeFqDw?sub_confirmation=1", "MsgWindow", "width=600,height=800");
}