We Keep Coding

Three buttons show the same content. HOW?

I have three buttons(when clicked, the modal shows) with different content inside them (every button has its own content and it's different from the other buttons) and now no matter on which button I click, it shows the same content from the last button I've added. Can anyone explain me how to fix this?
I need this to be done by Monday so quick help would be much appreciated.
<div class="popup1">
<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 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 30%;
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: #5ca6b8;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Sponsors</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Our Sponsors</h2>
</div>
<div class="modal-body">
<ul>
<li>MONG</li>
<li>SCNG</li>
<li>Feel Slovenia</li>
</ul>
</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>
</div>
<div class="popup2">
<style>
/* The Modal (background) */
.modal2 {
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-content2 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 30%;
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 */
.close2 {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close2:hover,
.close2:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header2 {
padding: 2px 16px;
background-color: #5ca6b8;
color: white;
}
.modal-body2 {padding: 2px 16px;}
.modal-footer2 {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
<!-- Trigger/Open The Modal -->
<button id="myBtn2">My Gear</button>
<!-- The Modal -->
<div id="myModal2" class="modal2">
<!-- Modal content -->
<div class="modal-content2">
<div class="modal-header2">
<span class="close2">×</span>
<h2>My gear</h2>
</div>
<div class="modal-body2">
<ul>
<li>Nikon D3100</li>
<li>Sigma 10-20mm f/4</li>
<li>Nikkor 70-300mm f4-5.6</li>
<li>Nikkor 18-55mm f/3.5</li>
</ul>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal2");
// Get the button that opens the modal
var btn = document.getElementById("myBtn2");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close2")[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>
</div>
<div class="popup3">
<style>
/* The Modal (background) */
.modal3 {
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-content3 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 30%;
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 */
.close3 {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close3:hover,
.close3:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header3 {
padding: 2px 16px;
background-color: #5ca6b8;
color: white;
}
.modal-body3 {padding: 2px 16px;}
.modal-footer3 {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
<!-- Trigger/Open The Modal -->
<button id="myBtn3">My Hobbies</button>
<!-- The Modal -->
<div id="myModal3" class="modal3">
<!-- Modal content -->
<div class="modal-content3">
<div class="modal-header3">
<span class="close3">×</span>
<h2>My hobbies</h2>
</div>
<div class="modal-body3">
<ul>
<li>Photography</li>
<li>Videography</li>
<li>Traveling</li>
<li>Racing</li>
</ul>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal3");
// Get the button that opens the modal
var btn = document.getElementById("myBtn3");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close3")[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>
</div>

You are using the same variable modal for all three. So this:
var modal = document.getElementById("myModal");
gets overwritten by this
var modal = document.getElementById("myModal2");
which gets overwritten by this
var modal = document.getElementById("myModal3");
By the time the click callback happens, modal is only referring to the 3rd one, so that's the one you end up showing.
The fact that these are in different script tags does not isolate them. You're declaring these variables at the top level of their scripts (as opposed to in a function for example), and so they are global variables.

Cannot close modal box via close button or by clicking outside modal box

I am very new to javascript and I am trying to use modal boxes for profile information. The website that I am building this on does happen to be a drag and drop interface.
I have gotten it to open all of my modals but it wont always close all of my modals. Please note that the below code is contained within the html area of a drag and drop website. Thus far I have avoided using global java although I am open to that. I just don't want to screw it up. All advice welcome.
Here is my code:
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
background-color: #ffffff;
}
.title {
color: grey;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #333192;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px; }
a {
text-decoration: none;
font-size: 22px;
color: black; }
button:hover, a:hover {
background-color: #1b1464; }
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 12px;
/* 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: #FFFFFF;
margin: auto;
padding: 0px;
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; cursor: pointer; {
color: #000;
text-decoration: none;}
.modal-header {
padding: 12px;
background-color: #333192;
color: F15C22; }
.modal-body {
padding: 12px;}
.modal-footer {
padding: 12px;
background-color: #F15C22;
color: white; }
.container {
position: relative;
width: 100%; }
a:link {
color: #ffffff; }
.image {
position: relative;
width: 100%;
height: auto; }
.image:hover { opacity: .7; }
</style>
<div class="card">
<a id="patricoloBtn"><img src="http://blog2.iap2usa.org/wp-content/uploads/2018/08/patricolo_francesca_sq.png" alt="Francesca" class="image" style="width:100%"></a>
<h2 class="contStyleHeaderSubtitle" style="font-weight: 300;"><font face="Helvetica">Francesca Patricolo</font></h2>
<p class="title" style="font-family: Arial, Helvetica, sans-serif; font-weight: 300;">Transportation Planner</p>
<p style="font-family: Arial, Helvetica, sans-serif;"><strong>Portland, Oregon</strong></p>
<div style="font-family: Arial, Helvetica, sans-serif; font-weight: 300; margin: 24px 0px;">
<img src="/resources/Pictures/Site%20Icons/linkedin.png" class="card" alt="Linkedin" title="Linkedin" border="0" width="40" height="40" align="center">
</div>
<p style="font-family: Arial, Helvetica, sans-serif; font-weight: 300;">
Contact
<div class="container">
<div id="patricoloModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h3 style="color:#F15C22">Francesca Patricolo</h3>
</div>
<div class="modal-body">
<p><img src="http://blog2.iap2usa.org/wp-content/uploads/2018/08/patricolo_francesca_sq.png" alt="Francesca" style="max-width: 210px; margin: 10px; border-radius: 50%;" align="left"><strong>What field do you work in?</strong></p>
<p>Transportation Planning</p>
<p><strong>What kinds of work do you do?</strong></p>
<p>Long range planning, public policy, regional coordination</p>
<p><strong>How many years have you been doing this work?</strong></p>
<p>10</p>
<p><strong>What's your favorite Core Value and why?</strong></p>
<p>#7: Public participation communicates to participants how their input affected the decision. -A KEY trust-builder! It's not done until we communicate back.</p>
<p><button><font color="#FFFFFF">Contact</font></button></p>
</div>
<div class="modal-footer"></div>
</div>
<script type="text/javascript">
/*** Get the modal***/ var patricoloModal = document.getElementById('patricoloModal');
/*** Get the button that opens the modal ***/ var patricoloBtn = document.getElementById("patricoloBtn");
/*** Get the <span> element that closes the modal***/ var span = document.getElementsByClassName("close");
/*** When the user clicks the button, open the modal***/
patricoloBtn.onclick = function() { patricoloModal.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 == patricoloModal) { patricoloModal.style.display = "none"; } }
</script>

Remove Javascript for displaying the Modal, this is not the proper way.
Replace this
<a id="patricoloBtn"><img src="path" alt="Francesca" class="image" style="width:100%"></a>
with
<a data-toggle="modal" data-target="#patricoloModal"><img src="path" alt="Francesca" class="image" style="width:100%"></a>

For adding event listeners to multiple elements you must do the following:
var span = document.getElementsByClassName("close");
span.forEach(span => span.addEventListener("click", closeModal);
So heres the code:
/*** Get the modal***/
var patricoloModal = document.getElementById('patricoloModal');
/*** Get the button that opens the modal ***/
var patricoloBtn = document.getElementById("patricoloBtn");
/*** Get the <span> element that closes the modal***/
var span = document.getElementsByClassName("close");
/*** When the user clicks the button, open the modal***/
span.forEach(span => span.addEventListener("click", closeModal));
/*** When the user clicks on <span> (x), close the modal ***/
function closeModal() {
particoloModal.style.display = "none";
}
/*** When the user clicks anywhere outside of the modal, close it***/
document.body.addEventListener("click", (event)=>{
// IF THE CLICKED TARGET IS NOT EQUAL TO THE PARTICOLO MODEL
if(event.target !== particoloModal) {
particoloModal.style.display = "none";
}
})
Hope this works for you.

how to use draggable within modal?

I'm trying to use draggable() within modal.
it works perfectly outside of modal but doesn't work when I use it in modal.
Would you tell me what is the problem and how to fix this?
here is my full code.
(I just included all CSS and script. Didn't know how to post them separately. 2017.06.14)
Thank you.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"> </script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
#CHARSET "UTF-8";
element.style {
width: 200px;
display: block;
top: 5442px;
left: 629px;
}
.design-dropdown {
position: absolute;
left: -9999px;
top: -9999px;
padding: 5px 0;
background: white;
border: 1px solid #D7D7D7;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.3);
box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.3);
z-index: 10000;
}
.design-dropdown .divider {
border-top: 1px solid #ddd;
margin: 0px;
padding: 0px;
line-height: 1;
cursor: default;
height: 0px;
}
.design-dropdown li {
position: relative;
margin: 5px;
padding: 5px;
font-size: 15px;
color: #000;
cursor: pointer;
display: block;
overflow: hidden;
}
.design-dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
.design-dropdown li:hover {
background-color: #DEF;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 1000px;
height: 850px;
margin-bottom: 220px
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
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
margin-right:2%;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
*{
box-sizing: border-box;
}
/* The Modal (background) */
.modal-header {
position: relative;
font-size: 16px;
padding: 16px 20px 15px;
text-align: center;
border-bottom: 1px solid #e5e5e5;
color: #00B8FF;
left: 0;
right: 0;
width: 100%;
margin: auto;
float: right;
}
/* Modal Body */
.modal-body {
width:100%;
height:90%;
padding: 40px 30px 20px 30px;
}
.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 */
}
</style>
</head>
<body>
<!-- mouse left click window -->
<div class="grid_context_menu design-dropdown" id="grid_context_menu" style="width: 200px; display: block; top: 5467px; left: 653px;">
<ul class="custom-menu">
<li id="_setting" class="_setting"><span class="txt">imagemap seeting</span></li>
</ul>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header" align="center">
<span class="close">×</span>
<h3>video setting</h3>
</div>
<div class="modal-body" id="body" >
<div id="draggable" class="ui-widget-content">
<p >Drag me around</p>
</div>
</div>
</div>
</div>
<script>
//get dropdown on mouse right-click
$(document).ready(function(){
$(document).bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
// Show contextmenu
$(".grid_context_menu").finish().toggle(100).
// In the right position (the mouse)
css({
top: event.clientY + "px",
left: event.clientX + "px"
});
$(".custom-menu li").click(function(e){
// This is the triggered action name
switch($(this).attr("class")) {
case "_setting":
$(".modal").show();
$(".grid_context_menu").hide(100);
$(".close").click(function(){
$(document).on("contextmenu dragstart selectstart",function(e){
return true;
});
$(document).bind("contextmenu");
$(".modal").hide(100); })
$(".modal").unbind("contextmenu");
$(".modal").on("contextmenu dragstart selectstart",function(e){
return false;
});
break;
case "_extend": alert("second"); break;
case "_copy": alert("third"); break;
}
});
});
});
$( function() {
$( "#draggable" ).draggable();
} );
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("_setting");
// 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>

First try initial draggable item then do what you want to do. it s working now. Try this code.
https://jsfiddle.net/0orxxkvf/
$("#draggable").draggable();
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("_setting");
// 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";
}
}

Modal with embedded pdf

I am trying to put a modal on a website I am making that has an embedded PDF.
The pdf shows up really small. I did not write this code from scratch. I found it on another site. Can anyone help?
I'm using the Zurb Foundation framework, FYI.
https://jsfiddle.net/8ryeqfbc/
HTML----
<section class="modal">
<div class="wrap row small-up-1 medium-up-1">
<div class="special column"><h3>Modal</h3>
<!-- Trigger/Open The Modal -->
<button id="myBtn">View Full Menu</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">x</span>
<iframe src="pdf.pdf"></iframe>
</div>
</div>
</div>
</div>
</section>
Javascript ---
<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>
CSS-----
* 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: 500px; /* Full width */
height: 500px; /* 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: 95%;
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;
}

Style the iframe to have it fill the modal box.
.modal-content iframe {
height: 100%;
width: 100%;
}

Bring modal to front

Hey I am trying to bring this modal infront of the other elements on the page.
I already tried z-index: -1.
I would like to then implement this code on a adobe muse website and make the modal get an element from the selection of a combobox.
Thank you for your help.
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; front; /* Stay in place */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 600px; /* 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 */
z-index: 1; /* Sit on top */
}
/* Modal Content */
.modal-content {
background-color: #00A1E0;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 511px;
height: 250px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #blue;
text-decoration: none;
cursor: pointer;
</style>
<body>
<style>
div.background {
border: 0px solid black;
div {
background-color: #00A1E0;
width: 511px;
}
}
div.transbox {
margin: 30px;
background-color: #00A1E0;
border: 1px solid black;
opacity: 15%;
width: 511;
filter: alpha(opacity=100);
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Add to shopping card
<div class="background">
<div class="transbox">
<style>
#myBtn { color: #00A1E0; }
div.background {
border: 0px #00A1E0;
div {
background-color: #00A1E0;
width: 511px;
}
}
div.transbox {
margin: 30px;
background-color: #FF530D;
color: #00A1E0;
opacity: 80%;
width: 200;
filter: alpha(opacity=100);
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #00A1E0;
}
#myModal { background: ; }
</style>
</button>
</div>
</head>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>you have added the classic business cards to the shopping cart</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";
}
}
{
document.getElementById("resultSection").style.fontSize = "350%";
document.getElementById("resultSection").innerHTML = "<H2></H2> " + result;
}
</script>
<style> #myBtn {
position: relative;
font-size: 34px;
}
</style>
</body>
</html>

Try this - comments amended to show what I have changed
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place front is invalid - may break your css so removed */
padding-top: 100px; /* Location of the box - don't know what this does? If it is to move your modal down by 100px, then just change top below to 100px and remove this*/
left: 0;
right:0; /* Full width (left and right 0) */
top: 0;
bottom: 0; /* Full height top and bottom 0 */
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 */
z-index: 9999; /* Sit on top - higher than any other z-index in your site*/
}
You also have a missing end bracket from your .close:hover and focus and you seem to have a nested style within div.background - unless you are using a css pre-processor, then this is invalid css