Để tạo ra một Modal thì chúng ta cần ba ngôn ngữ để tạo lên nó gồn:
– HTML (bộ khung hiển thị cho Modal).
– CSS (mã gọi màu sắc và thuộc tính cho HTML thông qua id hoặc class).
– JS (Tạo hành động, bằng cách thay đổi CSS của HTML thông qua id hoặc class).
<button onclick="momodal()">Hiển thị</button>
Đây là nút gọi Modal để người dùng click vào, bạn có thể thay thế button bằng thẻ a.
<!-- html modal --> <div class="nenmodal" id="nenmodal-1"> <div class="nenmodal2"></div> <div class="ndmodal"> <div class="closemodal"><button onclick="momodal()">×</button></div> <div class="titlemodal">Tiêu đề của Modal</div> Nội dung hiển thị trong Modal của bạn </div> </div> <!-- kết thúc html modal -->
Nội dung HTML của Modal, khi sử dụng bạn chỉ cần thay đổi nội dung lại là xong.
<style>
/* CSS nền hiển thị Modal */
.nenmodal .nenmodal2 {
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.7);
z-index:1;
display:none;
}
/* CSS bảng nội dung Modal */
.nenmodal .ndmodal {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
background:#fff;
width:600px;
z-index:2;
text-align:center;
padding:20px;
box-sizing:border-box;
font-family:"Open Sans",sans-serif;
border-radius:20px;
display: block;
position: fixed;
box-shadow:0px 0px 10px #111;
}
@media (max-width: 700px) {
.nenmodal .ndmodal {width:90%;}
}
/* CSS bao bọc của nút tắt Modal */
.nenmodal .closemodal {
text-align:center;
margin-top:-40px;
margin-bottom:10px;
}
/* CSS tieu de của Modal */
.titlemodal{
font-weight:bold;
font-size:20px;
margin-bottom:10px;
}
/* CSS nút tắt modal */
.closemodal button{
width:40px;
height:40px;
padding:0px;
font-size:30px;
border-radius:100%;
background:#333;
color:#fff;
border:none;
}
.nenmodal.active .nenmodal2 {
display:block;
}
/* CSS hiệu ứng hiển thị Modal */
.nenmodal.active .ndmodal {
transition:all 300ms ease-in-out;
transform:translate(-50%,-50%) scale(1);
}
</style>
CSS tạo màu sắc và thuộc tính cho Modal HTML, mình đã chú thích chi tiết từng dòng css cho các bạn dễ dàng hình dung và thay đổi theo ý mình.
<!-- js Modal -->
<script>
function momodal(){
document.getElementById("nenmodal-1").classList.toggle("active");
}
</script>
Cuối cùng là JS khởi chạy Modal khi người dùng click vào nút gọi.