Multiple Modals not closing when I click on the X button - javascript

The modals that I have set up for my website are opening on clicking the respective div elements and they're closing as well when clicking outside the modals but they're not closing on clicking the 'X' buttons, except for the very first modal.
{% for i in range(anime_name|length)%}
<!-- The Modal -->
<div id = "more-details1" class = "modal">
<!-- More details content -->
<div class = "more-details-content">
<div class = "modal-header">
<span class = "close" id = "close_{{i}}">×</span>
<p> {{ anime_name[0] }} </p>
</div>
<div class = "modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
</div>
</div>
{% endfor %}
{% for i in range(anime_name|length)%}
<!-- The Modal -->
<div id = "more-details2" class = "modal">
<!-- More details content -->
<div class = "more-details-content">
<div class = "modal-header">
<span class = "close" id = "close_{{i}}">×</span>
<p> {{ anime_name[1] }} </p>
</div>
<div class = "modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
</div>
</div>
{% endfor %}
/* 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 */
}
.more-details-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: #f6e8d6;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover, .close:focus {
color: #222222;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #b83333;
color: #f6e8d6;
}
.modal-body {padding: 2px 16px;}
var modal1 = document.getElementById("more-details1")
var btn1 = document.querySelector(".anime-holder_0")
var span = document.getElementsByClassName("close")[0];
// var span1 = document.getElementById("close_0");
var modal2 = document.getElementById("more-details2")
var btn2 = document.querySelector(".anime-holder_1")
// var span2 = document.getElementById("close_1");
window.onclick = function(event) {
if(btn1.contains(event.target)){
modal1.style.display = "block";
} else {
if (!modal1.contains(event.target) && modal1.style.display === "block" || span.contains(event.target)) {
modal1.style.display = "none";
}
}
if (event.target == modal1) {
modal1.style.display = "none";
}
if(btn2.contains(event.target)){
modal2.style.display = "block";
} else {
if (!modal2.contains(event.target) && modal2.style.display === "block" || span.contains(event.target)) {
modal2.style.display = "none";
}
}
if (event.target == modal2) {
modal2.style.display = "none";
}
}
I'm using the jinja template to access the values from my dataframe in the modal section but also because I tried giving individual IDs to each 'close' aka 'X' button through "close_{{i}}" (as that seems to be working when I'm accessing the 'anime-holder_0' and 'anime-holder_1' in btn1 and btn2 through 'anime-holder_{{i}}') so I tried doing that here too with different 'span' for each modal but that didn't work as the multiple modals didn't close on clicking 'X' except for the first one.
It could be because of the many conditions being given in the windows.onclick = function(event) {} but having a seperate function for each modal doesn't work either because it overrides the previous one.
I'm not sure what's the reason for this problem but I'm just looking for a way to close multiple modals by clicking on their 'X' buttons AND clicking outside the modals themselves (Hopefully without having to use Bootstrap).

Related

Changing the text after clicking a button in a modal

May I know how to solve my problem, how will it work if you click the button then the confirm button then the text "Hello" will change to a "Hi" word? I tried my best to solve it but I still can not know how to figure my problem that is why I am asking for a help.
https://jsfiddle.net/chrismontage/dverj816/10/
<button class = "btn btn1" id = "myBtn">Button</button>
<h4 id = "message">
Hello
</h4>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
</div>
<div class="modal-body">
<h4 class = "text-center">Are you sure you want to cancel your order?</h4>
</div>
<div class="modal-footer mx-auto">
<button class = "btn" id = "confirm" onclick = "changeStatus()">Confirm</button>
<button class = "btn" id = "cancel">Cancel</button>
</div>
</div>
</div>
/* 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 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
max-width: 40%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: $color5;
text-decoration: none;
cursor: pointer;
}
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn1 = document.getElementById("myBtn");
var confirm = document.getElementById("confirm");
var cancel = document.getElementById("cancel");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn1.onclick = function() {
modal.style.display = "block";
}
confirm.onclick = function () {
modal.style.display = "none";
}
function changeStatus() {
document.getElementById("message").innerHTML = "Hi";
}
cancel.onclick = function () {
modal.style.display = "none";
}
// 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";
}
}
Just add one line to your confirm.onclick function:
confirm.onclick = function () {
modal.style.display = "none";
changeStatus();
}
You had the function right, just probably forgot to add it to your onclick listener.
I found the solution in your existing code just replace this code and it'll work
You can confirm it.
confirm.onclick = function ()
{
$(modal).parent().find('#message').html('Hi')
modal.style.display = "none";
}
You have two Event listner's attached to confirm button, you have to merge those two like below,
confirm.onclick = function () {
modal.style.display = "none";
document.getElementById("message").innerHTML = "Hi";
}
function changeStatus() {
modal.style.display = "none";
document.getElementById("message").innerHTML = "Hi";
}
Use only one of the above two event functions.

How can I use multiple modals on my site?

Trying to figure out how to use multiple modals on my website.
I have one working fine but try to use a second triggering the same javascript action but it doesn't pop up the modal. I need a system for making multiple modals as my idea is to make each one have a popup box displaying dicord usernames.
I pasted my code below:
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn1");
// 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";
}
}
.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: #7289da;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 10%;
/* 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;
}
<li id="myBtn1"><a><i class="fa fa-"><center><img height="20px"
src="/images/icons/discord.png"></center></i></a></li>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3 style="color:white;font-weight:bold;">Discord</h3>
<p style="color:white;font-weight:bold;font-style: italic;">text</p>
</div>
</div>
Detail(s)
You can easily achieve this via using querySelectorAll, this will return a HTMLCollection of DOM elements. You can then use the forEach function as stated below, personally I just find this approach slightly more readable than using a traditional for loop.
PS
A HTMLCollection is not the same as an Array, if you want to ever convert your HTMLCollection to an Array, you can do so via Array.from(HTMLCollection). There are other ways to convert Array-like objects to an Array, i.e. [].slice.call(HTMLCollection), you may wish to use the later approach if you wish to support legacy browsers or just browsers that do not support Array.from.
// Self invoked function.
(function() {
// List all of the buttons.
var btns = document.querySelectorAll("ul li a");
// List all of the modals.
var modals = document.querySelectorAll(".modal");
// The on click handler.
var onClickAction = function(index) {
// Get the modal by index.
var modal = modals[index];
if (modal != null) {
modal.style.display = "block";
// Now get the span.
var closeBtn = modal.querySelector(".close");
closeBtn.onclick = function() {
modal.style.display = "none";
};
// Re-assign the window event.
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
};
};
// Loop over each button.
btns.forEach(function(btn, index) {
btn.onclick = function() {
onClickAction(index);
};
});
})();
.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: #7289da;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 10%;
/* 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;
}
<ul>
<li id="myBtn1">
<a>
<i class="fa fa-">
<center><img height="20px" src="/images/icons/discord.png"></center>
</i>
</a>
</li>
<li id="myBtn2">
<a>
<i class="fa fa-">
<center><img height="20px" src="/images/icons/discord.png"></center>
</i>
</a>
</li>
</ul>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h3 style="color:white;font-weight:bold;">Discord</h3>
<p style="color:white;font-weight:bold;font-style: italic;">text - 1</p>
</div>
</div>
<div id="myModal2" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h3 style="color:white;font-weight:bold;">Discord</h3>
<p style="color:white;font-weight:bold;font-style: italic;">text - 2</p>
</div>
</div>

I cant get two HTML modals to show with CSS, JavaScript, and PHP

I am having trouble trying to get two different modals to show with two different buttons. On my actual website the buttons just show the incorrect modal but when I put it into an standalone HTML document we see the result is much different. One of the modals is showing on the screen before anyone hits a button and the second one shows with both button presses
Here is my standalone HTML Code
Any help is much appreciated, even a comment could help. I have about 3 hours into this problem ftr.
<html>
<head>
<style>
body {font-family: "Lato", sans-serif}
h1 {font-family: "Raleway", sans-serif,}
.mySlides {display: none}
p {
text-align: center;
font-size: 60px;
margin-top:0px;
}
.background {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
/* 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>
<button class="bar-item button padding-large hover-red hide-small right" id="myBtnL">Login</button>
<button id="myBtn" class="bar-item button padding-large hover-red hide-small right">Register</button>
<div id="myModalL" class="modalL">
<div class="modal-content">
<span class="closeL">×</span>
<p>some text in the L modal</p>
</div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
<script>
// Get the modal
var modalL = document.getElementById('myModalL');
// Get the button that opens the modal
var btnL = document.getElementById("myBtnL");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closeL")[0];
// When the user clicks the button, open the modal
btnL.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";
}
}
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>
</html>
</script>
</html>
So far what I see is that you had the class 'modal' written as 'modalL' on one of your modals. You've also got some other names done incorrectly - please check my revised example.
// Get the modal
var modalL = document.getElementById('myModalL');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the button that opens the modal
var btnL = document.getElementById("myBtnL");
// Get the <span> element that closes the modal
var span = document.getElementById("close");
var spanL = document.getElementById("closeL");
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks the button, open the modal
btnL.onclick = function() {
modalL.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks on <span> (x), close the modal
spanL.onclick = function() {
modalL.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";
}
}
body {font-family: "Lato", sans-serif}
h1 {font-family: "Raleway", sans-serif,}
.mySlides {display: none}
p {
text-align: center;
font-size: 60px;
margin-top:0px;
}
.background {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
/* 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;
}
<html>
<body>
<button class="bar-item button padding-large hover-red hide-small right" id="myBtnL">Login</button>
<button id="myBtn" class="bar-item button padding-large hover-red hide-small right">Register</button>
<div id="myModalL" class="modal">
<div class="modal-content">
<span id="closeL" class="close">×</span>
<p>some text in the L modal</p>
</div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="close" class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
</html>
</script>
</html>
<html>
<head>
<style>
body {font-family: "Lato", sans-serif}
h1 {font-family: "Raleway", sans-serif,}
.mySlides {display: none}
p {
text-align: center;
font-size: 60px;
margin-top:0px;
}
.background {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
/* 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 onload="myFunction()">
<button class="bar-item button padding-large hover-red hide-small right" id="myBtnL">Login</button>
<button id="myBtn" class="bar-item button padding-large hover-red hide-small right">Register</button>
<div id="myModalL" class="modalL">
<div class="modal-content">
<span class="closeL">×</span>
<p>some text in the L modal</p>
</div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
<script>
// Get the modal
var modalL = document.getElementById('myModalL');
// Get the button that opens the modal
var btnL = document.getElementById("myBtnL");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closeL")[0];
// When the user clicks the button, open the modal
btnL.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";
}
}
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";
}
}
function myFunction() {
document.getElementById("myModalL").style.display = 'none';
}
</script>
</html>
</script>
</html>

Javascript won't work when i change the href

i trying THIS modal and when i'm try to show it, its only blinking, because it's refreshing..
i'm using this to run it:
<a href='index.php?id=".$id."' onclick='showDiag();'>
i change the $id according to choice of an item in my table
i edited JS a little:
// Get the modal
var modal = document.getElementById('myModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
function showDiag() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onload = 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";
}
}
and later i getting values to modal content via
<h2><?php echo "#".$_GET['id']; ?></h2>
etc...
My question is: How i can change "?id=xx" so that javascript worked, to make content dynamically changed in one click?
Thanks so much for your answer!
Well, you have two options to make the modal work.
Replace your href value with something like href="#openmodal".
Keep your href value as it is and in your showDiag() method, add this line return false; Also change the onclick value to "return showDiag();"
For option one, it's straightforward, just replace the href value. For option two, below is the working example.
// 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
function showDiag() {
modal.style.display = "block";
return false;
}
// 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 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {
padding: 2px 16px;
}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
<a href='index.php?id=something' onclick='return showDiag();'>Click here</a>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
In case you want to get the href value for some other purposes, you can change your a tag to:
<a href='index.php?id=something' onclick='return showDiag(this);'>Click here</a>
And then, in your showDiag function, you can get the href value and use it as you need.
function showDiag(atag) {
modal.style.display = "block";
// Get href value
var href = atag.getAttribute('href');
// Use the href as your needs
return false;
}

Multiple contents based in same design modal

.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 */
font-size: 14px;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: black;
color: white;
margin: auto;
padding: 0;
border: 1px solid red;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: black;
color: white;
}
.modal-body {
padding: 2px 16px;
}
.album {
position: relative;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="album">
<img src="seventhalbum.jpg" alt="First Album" style="width:300;height300;">
<p></p>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Californication</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">X</span>
<h2>Californication</h2>
</div>
<div class="modal-body">
<p>1: Around the World</p>
<p>2: Parallel Universe</p>
<p>3: Scar Tissue</p>
<p>4: Otherside</p>
<p>5: Get on Top</p>
<p>6: Californication</p>
<p>7: Easily</p>
<p>8: Porcelain</p>
<p>9: Emit Remmus</p>
<p>10: I Like Dirt</p>
<p>11: This Velvet Glove</p>
<p>12: Savior</p>
<p>13: Purple Stain</p>
<p>14: Right on Time</p>
<p>15: Road Trippin'</p>
</div>
</div>
</div>
<p></p>
</div>
<div class="album">
<img src="eigthalbum.jpg" alt="First Album" style="width:300;height300;">
<p></p>
<!-- Trigger/Open The Modal -->
<button id="myBtn1">By the Way</button>
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close1">X</span>
<h2>By the Way</h2>
</div>
<div class="modal-body">
<p>1: By the Way</p>
<p>2: Universally Speaking</p>
<p>3: This Is the Place</p>
<p>4: Dosed</p>
<p>5: Don't Forget Me</p>
<p>6: The Zephyr Song</p>
<p>7: Can't Stop</p>
<p>8: I Could Die for You</p>
<p>9: Midnight</p>
<p>10: Through Away Your Television</p>
<p>11: Cabron</p>
<p>12: Tear</p>
<p>13: On Mercury</p>
<p>14: Minor Thing</p>
<p>15: Warm Tape</p>
<p>16: Venice Queen</p>
</div>
</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>
<script>
// Get the modal
var modal = document.getElementById('myModal1');
// Get the button that opens the modal
var btn = document.getElementById("myBtn1");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close1")[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>
Im trying to have my page to where there are Multiple buttons that open up different Modal contents, but using the same script and css design. Im having an issue where it oly opens up one certain example. (By the Way album only displaying) how can I fix this issue, labeling the divs different did not work, atleast not for me. The two buttons in my snippet show the issue.
Change the var's in the second modal in the javascript that is different from the other.
See fiddle: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/10/
// Get the modal
var modal1 = document.getElementById('myModal1');
// Get the button that opens the modal
var btn1 = document.getElementById("myBtn1");
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close1")[0];
// When the user clicks the button, open the modal
btn1.onclick = function() {
modal1.style.display = "block";
}
// When the user clicks on <span> (X), close the modal
span1.onclick = function() {
modal1.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
}

Categories