Cách tạo Modal giống Bootstrap như thế nào?

tạo modal kiểu bootstrap

Bạn sử dụng modal trên Bootstrap chỉ việc gắn và chỉnh sửa theo tên class là có thể hiển thị modal có sẳn giao diện rất ngon lành. Bài hôm nay mình sẽ chia sẻ cách làm modal từ A-Z bằng HTML, CSS, Javascript để các bạn vừa hiểu rõ cách thiết kế và nắm vững kiến thức cơ bản CSS  hơn.

Cách tạo modal

Bạn sẽ có một <button> và <div> modal.

Trong <div> modal-content sẽ có 3 phần:

  • Modal header + nút close X
  • Modal body chứa content
  • Modal footer

Khi bạn click button thì modal sẽ show ra. Một background màu xám che lấp toàn bộ màn hình trình duyệt và modal-content hiện ra bao gồm modal header + modal body + modal footer.

modal

Hướng dẫn tạo modal

HTML


<button id="btn" > Click </button>
 
 <div class="modal">
 
 <div class="modal-content">
 
 <span class="close"> X </span>
 <div class="modal-header">
 <h2>Modal header</h2>
 </div>
 
 <div class="modal-body">
 <p>Modal content ... bla bla</p>
 <p>Modal content ... bla bla</p>
 </div>
 
 
 <div class="modal-footer">
 <h2>Modal footer</h2>
 </div>
 
 </div>
 </div>

CSS

.modal {
 height: 100%;
 width: 100%;
 background: rgba(0,0,0,0.4);
 position: fixed;
 top: 0;
 left: 0;
 display: none;
 }
 
 .modal-content {
 width: 80%;
 margin: 10% auto;
 background: #fafafa;
 box-shadow: 0 4px 8px #000;
 animation-name: animationtop;
 animation-duration: 2.5s;
 }
 
 @keyframes animationtop {
 from { top: -300px; opacity: 0}
 to { top:10px; opacity: 1}
 }
 
 .modal-body {
 padding-left: 20px;
 }
 
 span {
 float: right;
 color: #ccc;
 padding: 10px;
 cursor: pointer;
 }
 
 span:hover {
 color: #fff;
 font-weight: bold;
 }
 
 .modal-header {
 background: #2a2e37;
 padding: 1px 5px;
 color: #fff;
 }
 
 .modal-footer {
 background: #2a2e37;
 padding: 1px 5px;
 color: #fff;
 }

Javascript

var modal = document.getElementsByClassName("modal"),
 btn = document.getElementById('btn'),
 close = document.getElementsByClassName("close");
 
 btn.onclick = function() {
 modal[0].style.display = 'block';
 }
 
 close[0].onclick = function() {
 modal[0].style.display = 'none';
 }
 
 window.onclick = function(e) {
 if (e.target == modal[0]) {
 modal[0].style.display = 'none';
 }
 }

Lời kết

Hãy xem video để hiểu rõ hơn cách thiết kế. Mọi thắc mắc các bạn cứ comment cho mình.

Hi vọng tutorial này giúp ích cho các bạn.

Leonard Huynh,

Bạn có thể thích

Leave a Reply

Your email address will not be published. Required fields are marked *