Modal Click Background Close
➤ CSS
/* The Modal (background) */
.modalHome {
background-image: linear-gradient(rgba(0, 0, 0, 0.9),rgba(0, 0, 0, 0.9)) , url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgZ1cF2pU5obktByz1yYLSxu4fQQeBt7ghcrbihiky2GbpLM3GTrZTv4fwr1rZMORNFsEAJ3zDDTgmA2erMBHPy8lgaMxwOH6WXrkXggU7udn3fpPOgl5RO2-2l4dNwxbIPG5TOvV6ApA/s16000/drone-hikers-top.jpg);
background-position: center;
background-size: cover;
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 */
.modalHome-content {
background-color: none;
margin: auto;
padding: 20px;
border: none;
width: 80%;
text-align:center;
}
/* The Close Button */
.closeHome {
color: white;
/*float: right;*/
font-size: 28px;
font-weight: bold;
}
.closeHome:hover,
.closeHome:focus {
color: #cc9b6d;
text-decoration: none;
cursor: pointer;
}
➤ HTML Code
<div id="myModalHome" class="modalHome">
<!-- Modal content -->
<!--<span class="close">×</span>-->
<div id="home" class="modalHome-content" >
<a class="closeHome"><p >CLICK</p></a>
<p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVw6ysRV_npHyN5XiYDvugHaTBHGbkols42acsurgEQXUtyM-JVYUxlfY8frs-CWgIllkz_DGDai3ibLVhwEfr0mBql7zzM5nWkVKo3bHGI0tvaBEERUz1kXpQ_JOADtmqG-BhDJ4-uLE/s320/thailand_logo.png" style="width:50px;height:auto;">
</p>
</div>
</div>
➤ JAVA Script
<script>
// Get the modal
var modal = document.getElementById("myModalHome");
modal.style.display = "block";
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closeHome")[0];
// 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>
ความคิดเห็น
แสดงความคิดเห็น