Modal dengan CSS murni tanpa javascript
Tutorial / Cara membuat modal dengan HTML dan CSS
Demo modal :
Tombol bisa diletakkan dimanapun, terpisah dengan konten modal.
Tahap membuat modal
1. HTML tombol modal
<p>
<label class="btn" for="demo">Demo modal</label>
</p>
2. HTML body modal
<input class="chek-box" id="demo-1" type="checkbox" />
<div class="modal">
<label class="mod-bg" for="demo"></label>
<div class="modal-content">
<label class="mod-close" for="demo"></label>
<div class='mod-head'>
<h3>Judul modal!</h3>
</div>
<div class='mod-body'>
<p>Paragraf</p>
</div>
</div><!-- tag penutup modal-content -->
</div><!-- tag penutup modal -->
3. CSS modal
.modal {
opacity:0;
visibility:hidden;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
text-align:left;
background:rgba(0,0,0,.4);
transition:opacity .25s ease;
z-index:100
}
.mod-body {
padding:10px
}
.mod-head h3 {
color:#fff;
background:#333;
padding:10px 20px;
margin:0 0 10px
}
.mod-bg {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
cursor:pointer
}
.chek-box {
display:none
}
.chek-box:checked + .modal {
opacity:1;
visibility:visible
}
.chek-box:checked + .modal .modal-content {
top:0
}
.modal-content {
transition:top .25s ease;
position:absolute;
top:-20%;
right:0;
bottom:0;
left:0;
width:70%;
margin:auto;
overflow:auto;
background:#fff;
border-radius:5px;
padding:0;
height:70%
}
.mod-close {
position:absolute;
right:1em;
top:1em;
width:1.1em;
height:1.1em;
cursor:pointer
}
.mod-close:after,.mod-close:before {
content:'';
position:absolute;
width:2px;
height:1.5em;
background:#ccc;
display:block;
transform:rotate(45deg);
left:50%;
margin:-3px 0 0 -1px;
top:0
}
.mod-close:hover:after,.mod-close:hover:before {
background:#fff
}
.mod-close:before {
transform:rotate(-45deg)
}
@media screen and (max-width: 768px) {
.modal-content {
width:90%;
height:90%;
box-sizing:border-box
}
}
/*-- CSS tombol --*/
.btn {
cursor:pointer;
background:#27ae60;
display:inline-block;
padding:.5em 1em;
color:#fff;
border-radius:3px
}
.btn:hover,.btn:focus {
background:#2ecc71
}
.btn:active {
background:#27ae60;
box-shadow:0 1px 2px rgba(0,0,0,.2) inset
}