<button onclick="momodal()">Hiển thị</button>

<!-- 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 -->


<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;
font-size:30px;
padding:0px;
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>

<!-- js Modal -->
<script>
function momodal(){
document.getElementById("nenmodal-1").classList.toggle("active");
}
</script>