Hướng dẫn làm Multiple Bootstrap Modals và step Modal Bootstrap đơn giản chỉ trong 15 phút

Tram Ho

Giới thiệu

  • Hầu hết các trang web hiện tại đều có sử dụng popup . POpup ngoài tác dụng hiện ra những thống báo chú ý, những yeu cau cần xác nhận(comfirm) là ok hoặc cancel. Nó còn dùng cho show ra một số tiện ích như chi tiết sản phẩm, thanh toán… mà cac lap trinh vien không muốn chuyển từ page này sang page # ,vẫn có thể thấy được thông tin về những gì họ cần biết trong cung 1 page.
  • Và Bootstrap là một framework được rất nhiều lập trình viên yêu thích và sử dụng. Modal bootstrap là một component trong bootstraps cho phép hiện thị popup với kích thước và hiệu ứng tuỳ chỉnh

Tạo popup với modal bootstraps

  • Giải thích: Khi click vào button Launch demo modal thì popup xuất hiện. Bạn để ý cho mình đoạn code sau data-toggle="modal" data-target="#exampleModal"
  • Trong đó:
    • data-target=”#exampleModal” là dùng để xác định popup nào được gọi (nếu có nhiều popup trên cùng trang), trong ví dụ trên là popup có id là #exampleModal
    • data-toggle=”modal” là lệnh mở một Modal Popup trong Bootstrap
  • Phần popup các bạn muốn show ra là đoạn code này : Trong popup đó các bạn muốn thêm gì thì thêm hiện ứng ra sao tuỳ các bạn.

Hướng dẫn làm Multiple Bootstrap Modals

  • Multiple Bootstrap Modals là sao. Là sự xuất hiện của popup thứ2 hoặc 3 nằm trên popup đầu
  • Rất đơn giản các bạn cũng làm Popup như bình thường và bạn muốn popup sau xuất hiện như thế nào cũng làm tao modal popup
  • ví dụ:

  • Giải thích Khi bạn muốn modal thứ 2 xuất hiện bạn chỉ cần. cho data-target=”id pop up bạn muốn show”. ví dụ trên data-target=”#exampleModal2″
  • Nhưng như thế chưa đủ. Khi hiện lên bạn sẽ thấy màu background overlay hiện ra đậm hơn. popup sau sẽ nằm tại popup đầu và nhìn như hình ảnh sau
  • Để sửa những lỗi vậy, mình pải làm sao. Đơn giản thôi bạn chỉ cần sửa như sau:
  • tại html ở popup2: thêm class : modal-second

  • tại css bạn thêm đoạn code sau:

  • tại js bạn thêm đoạn code sau:

Thế là bạn đã hoàn thành modal multiple rồi.

Hướng dẫn làm Step modal

  • Step modal là sao: là cùng 1 popup khi bạn click vào button này sẽ chuyển đến modal sau với nội dụng khác với nội dung ban đầu.
  • Đầu tiên bạn cứ tạo 1 popup modal như bình thường

Kết Luận

  • Mình đã hướng dẫn các bạn về cách xây dựng modal bootstrap, Multiple Bootstrap Modals và step Modal bootstrap. Các bạn thấy hay có thể áp dụng trong dự án hiện tại hoặc dự án tương lai. Và thấy có cách làm hay hơn các bạn có thể chia sẻ thêm ở phần comment
Chia sẻ bài viết ngay

Nguồn bài viết : Viblo