Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
33 Modal CSS Javascript Dành Cho Website

33 Modal CSS Javascript Dành Cho Website


Ngày 29 Tháng 1 Năm 2021

Bài viết hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo một modal cơ bản và các ví dụ thực tế để giúp bạn có thể dễ dàng tự xây dựng một modal đẹp mắt dành cho website của mình bằng HTML, CSS và Javascript nhé.

Cách Tạo Modal Cơ Bản Bằng CSS Javascript

Trong phần này chúng ta sẽ đi vào tìm hiểu cách tạo modal CSS Javascript cơ bản và tinh chỉnh nó để có thể hiển thị được trên nhiều màn hình thiết bị khác nhau thông qua đoạn mã bên dưới nhé:

HTML

<h2>Ví Dụ Modal</h2>
<!-- Nút Để  Mở Modal -->
<button id="myBtn">Mở Modal</button>
<!-- Modal Cho Website -->
<div id="myModal" class="modal">
  <!-- Nội Dung Modal -->
  <div class="modal-content">
    <span class="close">×</span>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
body {font-family: 'Noto Sans JP', sans-serif;}
/* Thiết Lập Modal Background */
.modal {
  display: none; /* Ẩn Mặc Định */
  position: fixed;
  z-index: 1;
  padding-top: 100px; /* Vị trí của modal */
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%;
  overflow: auto; /* thiết lập scroll khi cần thiết */
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}
#myBtn {
  background-color: #4CAF50; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
   box-shadow: 0 1px 1px rgba(0,0,0,0.12),
              0 2px 2px rgba(0,0,0,0.12),
              0 4px 4px rgba(0,0,0,0.12),
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 16px rgba(0,0,0,0.12);
  outline: none;
}
/* Nội Dung Modal */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 1px 1px rgba(0,0,0,0.12),
              0 2px 2px rgba(0,0,0,0.12),
              0 4px 4px rgba(0,0,0,0.12),
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 16px rgba(0,0,0,0.12);
  border-radius: 25px;
}
/* Nút Đóng Modal */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

Javascript

/* lấy phần tử modal */
var modal = document.getElementById("myModal");
/* thiết lập nút mở modal */
var btn = document.getElementById("myBtn");
/* thiết lập nút đóng modal */
var span = document.getElementsByClassName("close")[0];
/* Sẽ hiển thị modal khi người dùng click vào */
btn.onclick = function() {
  modal.style.display = "block";
}
/* Sẽ đóng modal khi nhấn dấu x */
span.onclick = function() {
  modal.style.display = "none";
}
/*Sẽ đóng modal khi nhấp ra ngoài màn hình*/
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

Và kết quả bạn xem hình ảnh dưới đây nhé:

Modal Example CSS Javascript

Còn dưới đây là kết quả trên codepen nhé!

See the Pen Tao Modal CSS Javascript by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.

Thiết Kế Modal CSS

Modal CSS

Kết quả bạn xem bên dưới nhé!

See the Pen Pure css popup box by Prakash (@imprakash) on CodePen.

Nguồn

Thiết Kế Modal Animation Jquery

Modal Animation Jquery

Kết quả bạn xem bên dưới nhé!

See the Pen Modal Animations by Jesse Couch (@designcouch) on CodePen.

Nguồn

Thiết Kế Material Design Modals

Kết quả bạn xem bên dưới nhé!

See the Pen Responsive Modal Design by Ettrics (@ettrics) on CodePen.

Nguồn

Thiết Kế BootStrap Modal

BootStrap Modal

Kết quả bạn xem bên dưới nhé!

See the Pen BootStrap Modal as Left/Right Sidebar by Shahen Algoo (@bootpen) on CodePen.

Nguồn

Thiết Kế BootStrap Modal Với Velocityjs

BootStrap Modal Với Velocityjs

Kết quả bạn xem bên dưới nhé!

See the Pen Bootstrap Modal and popover with Velocity.js animation by Mike Sozanski (@macsupport) on CodePen.

Nguồn

Thiết Kế Modal Video

Modal Video

Kết quả bạn xem bên dưới nhé!

See the Pen Play YouTube or Vimeo Video in Modal - Bootstrap 4 by Jacob Lett (@JacobLett) on CodePen.

Nguồn

Thiết Kế Bootstrap Modal Animation Bằng Animate.css

Bootstrap Modal Animation Bằng Animate.css

Kết quả bạn xem bên dưới nhé!

See the Pen Bootstrap Modal Animation With Animate.css by Nunaram Hembram (@nhembram) on CodePen.

Nguồn

Thiết Kế Hiệu Ứng Chuyển Động Cho Modal

Hiệu Ứng Chuyển Động Cho Modal

Kết quả bạn xem bên dưới nhé!

See the Pen Modal Animation Physics by Tey Tag (@pix3l) on CodePen.

Nguồn

Thiết Kế Modal Popup Window

Modal Popup Window

Kết quả bạn xem bên dưới nhé!

See the Pen Modal Popup Window by Kevin Haag (@khaag) on CodePen.

Nguồn

Thiết Kế Fullscreen Bootstrap Modal

Fullscreen Bootstrap Modal

Kết quả bạn xem bên dưới nhé!

See the Pen Fullscreen Bootstrap Modal by Nathan Cooper (@nathancooper) on CodePen.

Nguồn

Thiết Kế Jquery Modal Toàn Màn Hình

Jquery Modal Toàn Màn Hình

Kết quả bạn xem bên dưới nhé!

See the Pen Morphing Modal Window by CodyHouse (@codyhouse) on CodePen.

Nguồn

Thiết Kế Draggable Bootstrap Modal Window

Draggable Bootstrap Modal Window

Kết quả bạn xem bên dưới nhé!

See the Pen Draggable Bootstrap Modal Window by Adam Joiner (@adamcjoiner) on CodePen.

Nguồn

Thiết Kế Simple jQuery Modal

Simple jQuery Modal

Kết quả bạn xem bên dưới nhé!

See the Pen Modal Dialog by David Fitas (@dfitzy) on CodePen.

Nguồn

Thiết Kế Modal Popup Animation

Modal Popup Animation

Kết quả bạn xem bên dưới nhé!

See the Pen Move Modal In on Path by Chris Coyier (@chriscoyier) on CodePen.

Nguồn

Thiết Kế Login Modal

Login Modal

Kết quả bạn xem bên dưới nhé!

See the Pen login modal by Mert Cukuren (@knyttneve) on CodePen.

Nguồn

Cách Tạo Nifty Modal Window Effects

Nifty Modal Window Effects

Kết quả bạn xem bên dưới nhé!

See the Pen Nifty Modal Window or Slider Effects by coldarif (@coldarif) on CodePen.

Nguồn

Cách Tạo Login Và Signup Form Modal

Login Và Signup Form Modal

Kết quả bạn xem bên dưới nhé!

See the Pen Login & Signup Form by Emil (@emilcarlsson) on CodePen.

Nguồn

Cách Tạo Modal CSS3 Javascript

Modal CSS3 Javascript

Kết quả bạn xem bên dưới nhé!

See the Pen Super Simple Easy Modal /w ES6 by Jøshüå Wård (@joshuaward) on CodePen.

Nguồn

Cách Tạo Multiple Bootstrap Modal

Multiple Bootstrap Modal

Kết quả bạn xem bên dưới nhé!

See the Pen Multiple Bootstrap Modals with next/prev buttons by Santiago Cabrera (@santiagocab1) on CodePen.

Nguồn

Cách Tạo Print Modal Javascript

Print Modal Javascript

Kết quả bạn xem bên dưới nhé!

See the Pen Print Modal by Petia (@designify-me) on CodePen.

Nguồn

Cách Tạo Flat Modal Window

Flat Modal Window

Kết quả bạn xem bên dưới nhé!

See the Pen Flat Modal Window by Dronca Raul (@rauldronca) on CodePen.

Nguồn

Cách Tạo React Modal Ui

React Modal Ui

Kết quả bạn xem bên dưới nhé!

See the Pen React Modal Ui by Mike (@mike-grifin) on CodePen.

Nguồn

Cách Custom Modal CSS Javascript

Custom Modal CSS Javascript

Kết quả bạn xem bên dưới nhé!

See the Pen Modal - CSS & Vanilla JS by Brad Traversy (@bradtraversy) on CodePen.

Nguồn

Cách Modal CSS bằng :target selector

Modal CSS bằng :target selector

Kết quả bạn xem bên dưới nhé!

See the Pen CSS Modal :target Selector by Jake Albaugh (@jakealbaugh) on CodePen.

Nguồn

Cách SignUp Form Modal

SignUp Form Modal

Kết quả bạn xem bên dưới nhé!

See the Pen Daily UI #001 - Sign Up Modal by Kyle Lavery (@kylelavery88) on CodePen.

Nguồn

Cách Tạo Success/ Error Modal

Success/ Error Modal

Kết quả bạn xem bên dưới nhé!

See the Pen Success Modal with Animation by Bryce Snyder (@brycesnyder) on CodePen.

Nguồn

Cách Tạo Tailwind CSS Modal

Tailwind CSS Modal

Kết quả bạn xem bên dưới nhé!

See the Pen Tailwind CSS Modal Demo with Animations by Marco Mark (@m2de) on CodePen.

Nguồn

Thiết Kế Responsive CSS Modal

Responsive CSS Modal

Kết quả bạn xem bên dưới nhé!

See the Pen Pure CSS Modal window / Login & Sign up / Tabs / All Responsive by Andrew (@AndrewBeznosko) on CodePen.

Nguồn

Thiết Kế Hiệu Ứng Blur Background Modal

Hiệu Ứng Blur Background Modal

Kết quả bạn xem bên dưới nhé!

See the Pen Modal / blurred background by Elizabet Oliveira (@miukimiu) on CodePen.

Nguồn

Thiết Kế Modal Card CSS

Modal Card CSS

Kết quả bạn xem bên dưới nhé!

See the Pen Pure CSS Modal - #15 by Ivan Grozdic (@ig_design) on CodePen.

Nguồn

Thiết Kế Jquery Modal Box

Jquery Modal Box

Kết quả bạn xem bên dưới nhé!

See the Pen Another Modal Box - Zzz by Kitsune (@kitsune) on CodePen.

Nguồn

Thiết Kế Vue Modal

Vue Modal

Kết quả bạn xem bên dưới nhé!

See the Pen Custom Vue Modal by Christophor Wilson (@CSWApps) on CodePen.

Nguồn

Thiết Kế Angular Modal

Angular Modal

Kết quả bạn xem bên dưới nhé!

See the Pen a simple angular modal dialog by Doray_Hong (@DorayHong) on CodePen.

Nguồn

Nếu bạn muốn tham khảo thêm về Modal thì có thể truy cập đường dẫn bên dưới nhé!

Nguồn

Nếu bạn muốn tham khảo các thư viện tạo modal thì có thể truy cập đường dẫn bên dưới nhé!

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những modal hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!