I recently started learning Javascript and I'm trying to implement modal boxes for profile information on a drag-and-drop website. While I have successfully managed to open all the modals, there seems to be an issue with closing them consistently. The code below is embedded in the HTML section of a drag-and-drop platform, and although I have refrained from using global JavaScript so far, I am willing to explore that option if needed. Any advice or suggestions are greatly appreciated.
<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;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 12px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.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;
}
@-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}
}
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover, .close:focus {
color: #000;
text-decoration: none;
}
.modal-header {
padding: 12px;
background-color: #333192;
color: F15C22;
}
.container {
position: relative;
width: 100%;
}
</style>
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">
// Modal body content here
</div>
<div class="modal-footer"></div>
</div>
<script type="text/javascript>
var modal = document.getElementById('patricoloModal');
var btn = document.getElementById("patricoloBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>