<body>
<button class="open-modal-btn">Open Modal</button>
<div class="modal hide">
<div class="modal__inner">
<div class="modal__header">
<p>Welcome to Nodemy</p>
<i class="fas fa-times"></i>
</div>
<div class="modal__body">
<h2><span class="ez-toc-section" id="Modal"></span>Modal<span class="ez-toc-section-end"></span></h2>
<p>Đây là phần body của modal</p>
</div>
<div class="modal__footer">
<button>Close</button>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
:root {
--pink-color: #e26e70;
}
* {
padding: 0;
margin: 0;
font-family: sans-serif;
box-sizing: border-box;
}
body {
background-image: linear-gradient(
45deg,
rgb(65, 88, 208) 0%,
rgb(200, 80, 192) 50%,
rgb(255, 204, 112) 100%
);
height: 100vh;
overflow: hidden;
}
.open-modal-btn {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
outline: none;
border: none;
padding: 20px 40px;
border-radius: 6px;
font-size: 20px;
cursor: pointer;
box-shadow: 0 0 5px #aba4a4;
background-color: #fff;
transition: 0.25s;
}
.open-modal-btn:hover {
background-color: rgba(255, 255, 255, 0.8);
}
.modal {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
}
.hide {
display: none;
}
.modal__inner {
width: 450px;
background-color: #fff;
border-radius: 5px;
overflow: hidden;
animation: showModal linear 0.2s;
position: relative;
margin: 200px auto;
}
@keyframes showModal {
from {
top: -200px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}
.modal__header {
background-color: var(--pink-color);
color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
font-size: 17px;
}
.modal__body {
padding: 15px;
}
.modal__body h2 {
color: var(--pink-color);
margin-bottom: 10px;
}
.modal__footer {
padding: 15px;
text-align: right;
}
.modal__footer button {
outline: none;
border: none;
padding: 10px 20px;
background-color: var(--pink-color);
color: white;
border-radius: 6px;
cursor: pointer;
}
i {
cursor: pointer;
font-size: 18px;
}
const modal = document.querySelector(".modal");
const openModalBtn = document.querySelector(".open-modal-btn");
const iconCloseModal = document.querySelector(".modal__header i");
const buttonCloseModal = document.querySelector(".modal__footer button");
<a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> toggleModal() {
modal.classList.toggle("hide");
}
openModalBtn.addEventListener("click", toggleModal);
iconCloseModal.addEventListener("click", toggleModal);
buttonCloseModal.addEventListener("click", toggleModal);
modal.addEventListener("click", (e) => {
if (e.target == e.currentTarget) toggleModal();
});
LỘ TRÌNH LÊN FULLSTACK, trọn bộ serial course Pro HTML,CSS,JAVASCRIPT MIỄN PHÍ :
HTML : HTML căn bản cho người mới bắt đầu
CSS : CSS căn bản cho người mới bắt đầu
JS: Javascript cho người mới bắt đầu
2 Responses