Hướng dẫn modal center bootstrap - modal center bootstrap

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người. Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất. Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook Facebook

1- Bootstrap Modal

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ị phía trên tất cả các nội dung khác của trang hiện tại. Mục đích của Modal là thông báo với người dùng điều gì đó của ứng dụng hoặc chờ đợi người dùng nhập vào các thông tin. 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ị phía trên tất cả các nội dung khác của trang hiện tại. Mục đích của Modal là thông báo với người dùng điều gì đó của ứng dụng hoặc chờ đợi người dùng nhập vào các thông tin.

Mặc dù Javascript có hỗ trợ một vài dialog (hộp thoại) khác nhau như Confirm, Alert, Open File, Save file,.. nhưng rõ ràng các dialog này không thể tùy biến, và vì vậy bạn mong chờ một cái gì đó tốt hơn. Javascript có hỗ trợ một vài dialog (hộp thoại) khác nhau như Confirm, Alert, Open File, Save file,.. nhưng rõ ràng các dialog này không thể tùy biến, và vì vậy bạn mong chờ một cái gì đó tốt hơn.

Trước hết hãy xem một ví dụ:

modal-example1.html

   
      
      
      
   
   
      
      
           Open modal
      

      
      

         

            

               
               

                  
Modal Heading
                  ×
               
               
               

                  Modal body..
               
               
               

                  Close
               
            
         
      

      
      
      
   
  

Dưới đây là cấu trúc của một Modal. Phần tử div.modal-content là nơi bạn quan tâm, nó bao gồm 3 vùng Header, Body & Footer, và bạn có thể tùy biến trên cả 3 vùng đó. Modal. Phần tử div.modal-content là nơi bạn quan tâm, nó bao gồm 3 vùng Header, Body & Footer, và bạn có thể tùy biến trên cả 3 vùng đó.

Modal Attributes

   

      

         
         

            
Modal Title
            ×
         
         
         

            Modal body..
         
         
         

            Close
         
      
   

Thuộc tính (Attribute) (Attribute)	Mô tả
data-backdrop	Thuộc tính này có hai giá trị là true hoặc static. Mặc định là true, có nghĩa là người dùng có thể nhấn vào nền (background) để đóng Modal. true hoặc static. Mặc định là true, có nghĩa là người dùng có thể nhấn vào nền (background) để đóng Modal.
data-keyboard	Thuộc tính này có hai giá trị là true hoặc false. Mặc định là false, nếu là true người dùng có thể đóng Modal bằng cách nhấn nút ESC. true hoặc false. Mặc định là false, nếu là true người dùng có thể đóng Modal bằng cách nhấn nút ESC.
aria-labelledby	Thuộc tính của HTML5HTML5
aria-hidden	Thuộc tính của HTML5HTML5

Lớp .fade cho phép bạn tạo ra hiệu ứng khi ẩn hoặc hiện Modal. .fade cho phép bạn tạo ra hiệu ứng khi ẩn hoặc hiện Modal.

.fade

   

      

        
         

            
Modal Title
            ×
         
        
         

            Modal body..
         
         

            Close
         
      
   

Ví dụ, tạo một Modal không chứa nút "X" (Thấy tại góc trên bên phải của Modal). Modal không chứa nút "X" (Thấy tại góc trên bên phải của Modal).

Modal without X button

   

      

         

            
Modal Title
         
         

            Modal body..
         
         

            Close
         
      
   

2- Modal & jQuery

Bạn có thể sử dụng JQuery để tương tác với Modal, chẳng hạn ẩn hoặc hiện Modal. JQuery để tương tác với Modal, chẳng hạn ẩn hoặc hiện Modal.

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

Hoặc đầy đủ hơn:

$('#myModal').modal(options);

// Example:

var options = {
  'backdrop' : 'static',
  'keyboard' : true,
  'show' : true,
  'focus' : false
}

Tùy chọn	Mô tả
Thuộc tính này có hai giá trị là true hoặc static. Mặc định là true, có nghĩa là người dùng có thể nhấn vào nền (background) để đóng Modal.	Thuộc tính này có hai giá trị là true hoặc false. Mặc định là false, nếu là true người dùng có thể đóng Modal bằng cách nhấn nút ESC. true hoặc static. Mặc định là true, có nghĩa là người dùng có thể nhấn vào nền (background) để đóng Modal.
keyboard	Tùy chọn này có hai giá trị là true hoặc false. Mặc định là false, nếu là true người dùng có thể đóng Modal bằng cách nhấn nút ESC. true hoặc false. Mặc định là false, nếu là true người dùng có thể đóng Modal bằng cách nhấn nút ESC.
show	Tùy chọn này có 2 giá trị là true hoặc false. Dùng để hiển thị hoặc ẩn Modal. true hoặc false. Dùng để hiển thị hoặc ẩn Modal.
focus	Tùy chọn này có 2 giá trị là true hoặc false, mặc định là false. Nếu là true, Modal sẽ được focus khi nó được khởi tạo. true hoặc false, mặc định là false. Nếu là true, Modal sẽ được focus khi nó được khởi tạo.

3- Sự kiện của Modal

Có một vài sự kiện được phát ra (fired) khi Modal mở hoặc đóng. Và bạn có bắt các sự kiện này để thực hiện một điều gì đó. Sử dụng phương thức "on" của jQuery để giàng buộc sự kiện với hàm xử lý. Modal mở hoặc đóng. Và bạn có bắt các sự kiện này để thực hiện một điều gì đó. Sử dụng phương thức "on" của jQuery để giàng buộc sự kiện với hàm xử lý.

Sự kiện	Mô tả
show.bs.modal	Sự kiện này phát ra (fired) ngay trước khi Modal hiển thị. Modal hiển thị.
shown.bs.modal	Sự kiện này phát ra ngay sau khi Modal hiển thị. Modal hiển thị.
hide.bs.modal	Sự kiện này phát ra ngay trước khi Modal bị ẩn. Modal bị ẩn.
hidden.bs.modal	Sự kiện này phát ra ngay sau khi Modal bị ẩn. Modal bị ẩn.

Bạn có thể xử lý một trong các sự kiện trên giống dưới đây:

$('#myModal').on('shown.bs.modal', function (e) {
  alert('Modal is successfully shown!');
});