Modal
×
Your Modal Content..!
Structure
<button class="modalbtn">Open Modal</button>
<div id="modal" class="modalbox">
<div class="modalcontent z-depth-2">
<span class="close">×</span>
<p>Your Modal Content..!</p>
</div>
</div>
Style
<style>
*{box-sizing: border-box;}
.modalbox {
display: none;
position: fixed;
z-index: 999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.6);
}
.modalbtn{
background-color:#9575cd;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.modalbtn:hover{
opacity:0.7;
}
.modalcontent {
position:relative;
background-color: #fefefe;
margin:auto;
margin-top: 15%;
padding: 20px;
border: 1px solid #888;
width: 80%;
animation: slideLeftIn .5s;
height:40%;
text-align:center;
}
.close {
position: absolute;
right: 14px;
top: 0;
color: #aaa;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover {
color: black;
}
@keyframes slideLeftIn {
0% {transform:translateX(-100%);opacity:0;}
100% {transform:translateX(0);opacity:1;}
}
</style>
Process
<script src="jquery.min.js"></script>
<script>
$(".modalbtn").click(function(){
$("#modal").css("display","block");
});
$(".close").click(function(){
$(this).parents(".modalbox").css("display","none");
});
$(".modalbox").click(function(e){
if(e.target==e.currentTarget)$(this).css("display","none");
});
</script>