We Keep Coding

How do I make add more than 1 modal box?

I have found out how to make Modal Boxes using html from here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2
I don't know how to make more than 1 work, I have tried copy and pasting but that makes only the first one work.

You should add a second modal in your HTML page triggered by a second button element.
<!-- The First Modal -->
<div id="myModal" class="modal">
<!-- The Second Modal -->
<div id="myModal2" class="modal">
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- Trigger/Open The Modal -->
<button id="myBtn2">Open Modal 2</button>
And also, in your JS code, duplicate your bindings:
// Get the modal
var modal = document.getElementById('myModal');
var modal2 = document.getElementById('myModal2');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
var btn2 = document.getElementById("myBtn2");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("close")[1];
Try this jsfiddle I made for you.

How do I display different modal/modal content when I clicking on the different Icons (Not Bootstrap)

I would like to get the other icons to work how the "Operations Management" is working. But I want it to say different things.
PLEASE HELP :(
Here is my fiddle : https://jsfiddle.net/RonaLochner/p4kt6oy1/
The Code:
<div class='circle-container'>
<a href='#' class='center'>
<h4 style="text-align:center;">Microsoft Dynamics 365</h4>
</a>
<div id="operations-management">
<img src='http://www.businesscentral.co.za/wp-content/uploads/2018/08/Business-Solutions-Icon2.png'>
</div>
<div id="reporting">
<img src='http://www.businesscentral.co.za/wp-content/uploads/2018/08/Business-Solutions-Icon3.png' id="myBtn">
</div>
<div id="supplychain">
<img src='http://www.businesscentral.co.za/wp-content/uploads/2018/08/Business-Solutions-Icon4.png' id="myBtn">
</div>
<div id="sales">
<img src='http://www.businesscentral.co.za/wp-content/uploads/2018/08/Business-Solutions-Icon5.png' id="myBtn">
</div>
<div id="financial">
<img src='http://www.businesscentral.co.za/wp-content/uploads/2018/08/Business-Solutions-Icon6.png' id="myBtn">
</div>
<div id="project">
<img src='http://www.businesscentral.co.za/wp-content/uploads/2018/08/Business-Solutions-Icon1.png' id="myBtn">
</div>
</div>
The model:
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>OPERATIONS MANAGEMENT</p>
</div>
</div>
The Script
<script>
// Get the modal
var modal = document.getElementById('myModal')
// Get the button that opens the modal
var btn = document.getElementById("operations-management");
// 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>
I have tried to target using different ID's but not sue how to fix this.

So first thing you want to do is add a class to each of the icons/buttons like so;
<div class="toggle" id="operations-management">
<img src='http://www.businesscentral.co.za/wp-content/uploads/2018/08/Business-Solutions-Icon2.png'>
</div>
Then you want to call them using querySelectorAll and convert it to array
// Get the button that opens the modal
var btns = Array.from(document.querySelectorAll(".toggle"));
We convert it to array because querySelectorAll returns a node list but we need an array to iterate through all the buttons so thats where the Array. So then we itierate over all of the buttons and add a event listener that points to a new function showModal
btns.forEach(function(btn) {
btn.addEventListener("click", showModal);
});
The showModal function will show the modal.
function showModal(e) {
modal.style.display = "block";
}
now you have you probably want to have different content in each modal right? I would make the p tag in your modal with an id and then using the (e) variable from the showModal function I would find the id of the button and then have an if statment that would change the modal p tag depending on the id that is passed from e. (if you set console.log(e) just before I set the modal.style.display you will see an object and there you can find the id.

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';

second modal button doesn't work

My second, third and so on buttons which open modal, doesn't work and I can't figure out the problem.
I think is a logic problem in my javascript code for sure, but I can't find a way to solve it ... maybe you can help me.
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal
var img = document.getElementById('myImg');
var modalImg = document.getElementById('img01');
var buton = document.getElementById('continut');
buton.onclick = function() {
modal.style.display = "block";
modalImg.src = img.src;
}
// 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";
}
You have a demonstration on jsfiddle
Thanks in advance !
https://jsfiddle.net/qschptk9/1/
I've got 2 negative votes, and NO ONE Helped me.
Ok i've Changed the ID's, but still doesn't work, because getElementsByClassName return an array of elements ...

id should be unique so you should't use it for 2 elements
you use the same id 2 times for many elemets (button, modal, img, modalimg)
you can change the id's for all those elements (hard coded option), or you can add a class for both and add click event for both but you will need to differentiate each modal and each img (you can do this by passing ids for these elements in a function)
Edit
this is an optimized solution that i would use for you want to do
I added only one modal and used onclick event for each button to pass the header text and the img id to a function that show the appropriate modal
here is the HTML
<div class="portfolio_content">
<div class="row" id="portfolio">
<div class="col-xs-12 col-sm-4 websites responsive webDesign">
<div class="portfolio_single_content">
<img id="myImg1" src="http://www.w3schools.com/css/img_fjords.jpg" alt="title" />
<div>
<!--Continut because from here we access the content of this preview photo-->
<div class="continut">
<p>Portfolio Website</p>
<button class="seeBtn" onclick="showModal('Portfolio Website','myImg1')">
button
</button>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 appsDevelopment">
<div class="portfolio_single_content">
<img id="myImg2" src="http://www.w3schools.com/css/img_fjords.jpg" alt="title" />
<div>
<!--Continut because from here we access the content of this preview photo-->
<div class="continut">
<p>Pomodoro Clock</p>
<button class="seeBtn" onclick="showModal('Pomodoro Clock','myImg2')">
button
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!--The modal-->
<div class="modal" id="myModal">
<!-- Modal content -->
<div class="modal-content">
<!--Modal header-->
<div class="modal-header">
<span class="close" id="close">CLOSE X<i class="fa fa-times" aria-hidden="true"></i></span>
<h2 id="modal_h1"></h2>
</div>
<div class="modal-body">
<img class="modal-image" id="img01">
</div>
<div class="modal-footer">
<h3>External link</h3>
</div>
</div>
</div>
and here is the js code
var modal = document.getElementById('myModal');
var modalImg = document.getElementById('img01');
var modalHeaderTxt = document.getElementById('modal_h1');
function showModal(header_txt,img_id){
// Get the image and insert it inside the modal
var img = document.getElementById(img_id);
modalImg.src = img.src;
modalHeaderTxt.innerHTML = header_txt;
modal.style.display = "block";
}
// Get the <span> element that closes the modal
var span = document.getElementById("close");
//When the user clicks on <span> (X), close the modal
span.onclick = function() {
modal.style.display = "none";
}
Demo
and here is the hard coded option (i don't recommend it)
var modal = document.getElementById('myModal');
var modal2 = document.getElementById('myModal2');
// Get the image and insert it inside the modal
var img = document.getElementById('myImg');
var img2 = document.getElementById('myImg');
var modalImg = document.getElementById('img01');
var modalImg2 = document.getElementById('img02');
var buton = document.getElementById('continut');
var buton2 = document.getElementById('continut2');
buton.onclick = function() {
modal.style.display = "block";
modalImg.src = img.src;
}
buton2.onclick = function() {
modal2.style.display = "block";
modalImg2.src = img2.src;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("close")[1];
//When the user clicks on <span> (X), close the modal
span.onclick = function() {
modal.style.display = "none";
}
span2.onclick = function() {
modal2.style.display = "none";
}
Demo

You have two id's with same name hence first id will be picked everytime. The ids must be unique. Please try changing the id and it should work.
Or you can try to change it into class names and then work with classes

You need to change the id's for the models to classes. You can't assign multiple id's in HTML. That's why your code works only for one modal.
Change your id's to classes like this:
<div class="modal myModal">

i think you have more than one element that has id='myModal'
, in that case you should do:
var modal = document.getElementById('myModal')[correct element number]
example :
document.getElementById('myModal')[0] //for the first element
document.getElementById('myModal')[1] //for the second element
and so on...
for each button

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");
}