Bạn đang muốn tạo ra một Modal Popup? Bạn chưa biết bắt đầu từ đâu? bài viết này tôi chia sẻ đến bạn cách thực tạo ra một modal nhanh, gọn, nhẹ.
Modal Popup là gì?
Modal là một Dialog (hộp thoại) hoặc là một Popup (cửa sổ bật lên), nó hiển thị đè lên trên tất cả các nội dung khác của trang hiện tại.
Lợi ích của Modal là hiển thị một thông báo, một tác vụ mà người dùng cần làm trong quá trình tương tác với website.
Ví dụ như hiển thị form đăng nhập, thông tin sản phẩm vừa thêm vào giỏ hàng, form thu thập thông tin khách hàng.
Để tạo ra Modal cần có kiến thức Html Css, Js cơ bản kết hợp với tư duy thuật toán để xứ lý các sự kiện trên Modal.
Video hướng dẫn tạo Modal Popup website
Bạn yên tâm, video này tôi chia sẻ bạn từng bước cách tạo modal, tôi tin rằng nó sẽ giúp bạn hiểu nguyện lý và tự tay code lên được modal cho riêng mình.
Source Code hướng dẫn tạo Modal Popup với Html, Css và Js
Cấu trúc folder
modal
|--index.htmlDưới đây là mã code hoàn thiện của chương trình, bạn hãy mở Visual Studio Code tạo dự án theo cấu trúc thư mục trên sau đó copy code bên dưới vào file index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<title>Modal Html Css Js</title>
</head>
<body>
<style>
*{
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
line-height: 1.3;
}
#wrapper{
min-height: 100vh;
}
button#btn-open{
background-color: rgb(14, 123, 224);
color: #fff;
border: none;
outline: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0, 0.3);
}
#modal-container{
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(0,0,0, 0.5);
height: 100vh;
/* display: flex;
justify-content: center; */
/* default */
opacity: 0;
pointer-events: none;
transition: all 0.3s ease-in-out;
}
#modal-container.show{
opacity: 1;
pointer-events:all;
}
.modal{
position: relative;
top: 0;
left: 50%;
transform: translateX(-50%);
max-width: 500px;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0, 0.3);
transition: all 0.25s ease-in-out;
}
#modal-container.show {
opacity: 1;
pointer-events:all;
}
#modal-container.show .modal{
top: 100px;
}
.modal-header{
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e9ecef;
}
.modal-header h3{
margin: 0;
}
.modal-header button#btn-close{
border: none;
background: none;
outline: none;
font-size: 20px;
cursor: pointer;
}
.modal-body{
padding: 0px 20px 20px;
}
</style>
<div id="wrapper">
<h1>Tạo Modal với html, css, javascript</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident cupiditate temporibus porro repellat fuga aliquid ea, qui quisquam? Iste vel omnis distinctio harum quo libero, consequatur nesciunt incidunt atque rerum!</p>
<button id="btn-open">Click Here Show Modal</button>
<p>Optio perferendis, vel, ea incidunt modi nemo repellat iste facere, quibusdam perspiciatis quas! Dolorem quis sit, amet, quod in, incidunt earum inventore provident natus quos quidem exercitationem assumenda distinctio. Quam!</p>
<p>Amet quae ratione voluptatem, quibusdam tenetur sed, cupiditate recusandae assumenda nam esse quo, quidem labore mollitia quod! Obcaecati nisi placeat maxime corrupti, veniam consequatur aliquam voluptatibus. Eligendi ducimus illo sit.</p>
<div id="modal-container">
<div class="modal" id="modal-demo">
<div class="modal-header">
<h3>Modal title</h3>
<button id="btn-close"><i class="fa-solid fa-xmark"></i></button>
</div>
<div class="modal-body">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus maxime sequi voluptate voluptas beatae sed eaque labore unde modi! Ipsa maxime explicabo, doloribus odit neque delectus cumque distinctio quas eveniet.</p>
</div>
</div>
</div>
</div>
<script>
const open = document.getElementById('btn-open');
// console.log(show);
const close = document.getElementById('btn-close');
const modal_container = document.getElementById('modal-container');
const modal_demo = document.getElementById('modal-demo');
open.addEventListener('click', ()=>{
modal_container.classList.add('show');
});
close.addEventListener('click', ()=>{
modal_container.classList.remove('show');
});
modal_container.addEventListener('click', (e)=>{
if(!modal_demo.contains(e.target)){
close.click();
}
});
</script>
</body>
</html>
Giải thích mã code.
Đoạn mã JavaScript này điều khiển hành vi của hộp thoại modal được định nghĩa trong mã HTML.
const open = document.getElementById('btn-open');
Dòng này chọn phần tử HTML có ID “btn-open” và lưu nó trong biến open. Phần tử này là nút được sử dụng để mở hộp thoại modal.
const close = document.getElementById('btn-close');
Tương tự, dòng này chọn phần tử HTML có ID “btn-close” và lưu nó trong biến close. Phần tử này là nút bên trong hộp thoại được sử dụng để đóng nó.
const modal_container = document.getElementById('modal-container');
Dòng này chọn phần tử HTML có ID “modal-container” và lưu nó trong biến modal_container. Phần tử này đại diện cho container chứa hộp thoại modal.
const modal_demo = document.getElementById('modal-demo');
Ở đây, mã chọn phần tử HTML có ID “modal-demo” và lưu nó trong biến modal_demo. Phần tử này đại diện cho hộp thoại modal chính.
open.addEventListener('click', ()=>{
modal_container.classList.add('show');
});
Đoạn mã này thêm một trình nghe sự kiện click vào nút open. Khi nút này được nhấp chuột, nó kích hoạt arrow function. Hàm này thêm class “show” vào modal_container, làm cho hộp thoại modal trở nên hiển thị bằng cách sửa đổi CSS của nó.
close.addEventListener('click', ()=>{
modal_container.classList.remove('show');
});
Tương tự, một trình nghe sự kiện click được thêm vào nút close. Khi nút này được nhấp chuột, nó kích hoạt arrrow function bên trong, loại bỏ class “show” khỏi modal_container, ẩn hộp thoại modal bằng cách sửa đổi CSS của nó.
modal_container.addEventListener('click', (e)=>{
if(!modal_demo.contains(e.target)){
close.click();
}
});
Một trình nghe sự kiện được thêm vào modal_container chính nó. Mã này lắng nghe sự kiện click trong modal_container. Khi một sự kiện click xảy ra, hàm được cung cấp trong mũi tên được thực thi. Nó kiểm tra xem phần tử được nhấp chuột (e.target) có nằm trong modal_demo (nội dung hộp thoại modal) không.
Nếu click xảy ra ngoài nội dung hộp thoại modal, nó mô phỏng một sự kiện click trên nút close bằng cách sử dụng close.click(). Điều này giúp đóng hộp thoại modal khi người dùng nhấp chuột bên ngoài khu vực của hộp thoại.
Tóm lại, mã JavaScript này cho phép hộp thoại modal mở bằng cách nhấp nút “Mở”, đóng bằng cách nhấp nút “Đóng” hoặc bằng cách nhấp chuột bên ngoài hộp thoại. Điều này được thực hiện bằng cách chuyển đổi lớp “show” trên modal_container và mô phỏng một sự kiện click trên nút “Đóng” khi cần thiết.
Tạm kết:
Video này hữu ích với bạn chứ? Nếu bạn xem video và cảm thấy quá nhiều chổ mình vẫn chưa nắm rõ thì tôi nghĩ rằng bạn đang chưa có nền tảng.
Nếu bạn muốn học đi làm nhưng đang mất định hướng thì hãy khảm khảo Html Css 21 Ngày, đây là chương trình giúp bạn thành thạo cách xây dựng giao diện website từ cơ bản đến nâng cao. Đi sâu vao cắt Html Css từ bản thiết kế.
