Cửa sổ bật lên bootstrap 4

Như các bạn đã biết, hầu hết các trang web hiện nay rất hay sử dụng giậtg 1 thành phần khá tiện lợi đó là cửa sổ bật lên. Tại sao nó tiện lợi? . cửa sổ bật lên còn có thể hiển thị rất nhiều thông tin khác. Chúng ta có thể lấy ví dụ cụ thể như thế này. Bạn đang có 1 website bán hàng. Tại trang chủ hoặc trang danh mục, có rất nhiều sản phẩm được hiển thị tuy nhiên thông tin sản phẩm rất ít. Khi khách hàng muốn xem chi tiết sản phẩm đó thì phải vào trang chi tiết sản phẩm. Như vậy rất có thể làm mất thời gian của khách hàng (trường hợp mạng yếu, kết nối chậm). Vì vậy, giải pháp ở đây là gì để khách hàng không cần vào trang chi tiết mà vẫn có thể xem các thông tin cần thiết của sản phẩm? . Popup quickview này có thể chứa một số thông tin cần thiết của sản phẩm mà khách hàng muốn biết nhất. Nó có thể hiển thị ngay tại trang chủ hoặc trang danh mục khi nhấp vào 1 nút bất kỳ mà không cần phải truy cập trang chi tiết của sản phẩm. Và còn rất nhiều tiện lợi khác khi chúng ta sử dụng popup trên website của mình. Vì vậy, làm thế nào để tạo cửa sổ bật lên này? . Rất đơn giản, chúng ta sử dụng bootstrap để tạo cửa sổ bật lên. Bạn hỏi tôi, có thể sử dụng thư viện khác để tạo cửa sổ bật lên không? . Bạn có thể sử dụng bất kỳ thư viện js nào hoặc bạn cũng có thể tự viết 1 đoạn javascript để tạo 1 cửa sổ bật lên. Nhưng chúng ta đang sử dụng bootstrap cho nên ngay bây giờ, hãy quay về vấn đề chính thôi nào. cửa sổ bật lên. Tại sao nó tiện lợi? . cửa sổ bật lên còn có thể hiển thị rất nhiều thông tin khác. Chúng ta có thể lấy ví dụ cụ thể như thế này. Bạn đang có 1 website bán hàng. Tại trang chủ hoặc trang danh mục, có rất nhiều sản phẩm được hiển thị tuy nhiên thông tin sản phẩm rất ít. Khi khách hàng muốn xem chi tiết sản phẩm đó thì phải vào trang chi tiết sản phẩm. Như vậy rất có thể làm mất thời gian của khách hàng (trường hợp mạng yếu, kết nối chậm). Vì vậy, giải pháp ở đây là gì để khách hàng không cần vào trang chi tiết mà vẫn có thể xem các thông tin cần thiết của sản phẩm? . Popup quickview này có thể chứa một số thông tin cần thiết của sản phẩm mà khách hàng muốn biết nhất. Nó có thể hiển thị ngay tại trang chủ hoặc trang danh mục khi nhấp vào 1 nút bất kỳ mà không cần phải truy cập trang chi tiết của sản phẩm. Và còn rất nhiều tiện lợi khác khi chúng ta sử dụng popup trên website của mình. Vì vậy, làm thế nào để tạo cửa sổ bật lên này? . Rất đơn giản, chúng ta sử dụng bootstrap để tạo cửa sổ bật lên. Bạn hỏi tôi, có thể sử dụng thư viện khác để tạo cửa sổ bật lên không? . Bạn có thể sử dụng bất kỳ thư viện js nào hoặc bạn cũng có thể tự viết 1 đoạn javascript để tạo 1 cửa sổ bật lên. Nhưng chúng ta đang sử dụng bootstrap cho nên ngay bây giờ, hãy quay về vấn đề chính thôi nào

Cách sử dụng

Bootstrap Modal Plugin là thành phần sẵn có trong Bootstrap, ta chỉ cần gọi nó là ra và sử dụng

Để hiện cửa sổ bật lên như hình trên, các bạn có thể sử dụng đoạn mã như sau

  Launch demo modal



  

    

      

        ×
        
This is Modal
      
      

        
Modal body
      
      

        Close
        Save changes
      
    
  

Can't descriptor các thành phần chính như sau

Popup button call

• data-target="#myModal" được dùng để xác định bất kỳ cửa sổ bật lên nào được gọi (nếu có nhiều cửa sổ bật lên trên cùng trang), trong ví dụ về cửa sổ bật lên có id là #myModal được sử dụng để xác định cửa sổ bật lên nào được gọi (nếu có

• data-toggle="modal" is command open a Modal Popup in Bootstrap is command open a Modal Popup in Bootstrap

• Bạn có thể sử dụng nút hoặc thẻ hoặc để gọi cửa sổ bật lên nhưng phải luôn có 2 thuộc tính ở trên. or to call popup but always must have 2 property at on

Cửa sổ bật lên

• Thẻ cha chứa id="myModal" dùng để xác định cửa sổ bật lên nào được gọi khi nhấp vào nút, lớp. phương thức xác định nội dung nào là của cửa sổ bật lên chứa id="myModal" được sử dụng để xác định bất kỳ cửa sổ bật lên nào được gọi khi nhấp vào nút, lớp. phương thức xác định nội dung nào là của cửa sổ bật lên
• Class fade is hiệu ứng chuyển tiếp với fade in và fade out
• Thuộc tính role="dialog" hiển thị hộp thoại dạng cửa sổ bật lên

Phần Nội dung phương thức Nơi chứa nội dung chính mà bạn muốn hiển thị trong cửa sổ bật lên. Ở phần này có thể tùy chỉnh hoặc giữ nguyên mặc định nếu muốn

Close Modal data-dismiss="modal" is used to close popup. Để định dạng thành phần đóng cửa sổ bật lên, bạn có thể sử dụng , hoặc. Tuy nhiên, bắt buộc phải có lệnh này để có thể đóng cửa sổ bật lên. Ngoài ra, bạn có thể thêm class="close" để sử dụng css sẵn có của bootstrap cho thành phần này. data-dismiss="modal" is used to close popup. Để định dạng thành phần đóng cửa sổ bật lên, bạn có thể sử dụng , hoặc. Tuy nhiên, bắt buộc phải có lệnh này để có thể đóng cửa sổ bật lên. Ngoài ra, bạn có thể thêm class="close" để sử dụng css sẵn có của bootstrap cho thành phần này

Kích thước tùy chọn cho cửa sổ bật lên

Bootstrap cho phép các phương thức có hai kích thước tùy chọn được định nghĩa bằng các lớp được đặt cùng với. modal-dialog is. modal-lg and. phương thức-sm. modal-dialog is. modal-lg and. phương thức-sm

1. Phương thức lớn Để hiển thị phương thức lớn, có thể sử dụng phương thức lớp-lg với đoạn mã sau. To show large modal, could use class modal-lg with the code after

Large modal


  

    

      This is body of large modal
    
  

Hiển thị kết quả

2. Small Modal To show small modal, could use class modal-sm with the code after. To show small modal, could use class modal-sm with the code after

Small modal


  

    

     This is body of small modal
    
  

Hiển thị kết quả

2. Small Modal To show small modal, could use class modal-sm with the code after

Loại bỏ hiệu ứng khi hiển thị

có lớp. phai màu. Tác dụng của lớp này là gì? . Nếu bạn muốn các phương thức hiển thị một cách đơn giản thay vì có các hiệu ứng như mờ dần, hãy xóa bỏ lớp. fade from your markup modal

Hãy để ý kỹ trong lớp học. phai màu. Tác dụng của lớp này là gì? . Nếu bạn muốn các phương thức hiển thị một cách đơn giản thay vì có các hiệu ứng như mờ dần, hãy xóa bỏ lớp. fade from your markup modal

Tóm lại, chỉ cần vài thao tác đơn giản, bạn đã có thể tạo được các cửa sổ bật lên cho trang web của mình. Chúc các bạn thành công