Hiển thị Popup khi bấm vào nút Call to Action

23/03/20242 phút đọc7350 bình luận

Đoạn code đơn giản để hiển thị Popup sau khi bấm vào nút hoặc link kêu gọi hành động, sử dụng element có sẵn của theme Flatsome. . .

Bước 1: Chọn nút hoặc text và đặt link để mở popup. Cấu trúc link dạng (Ví dụ): #mopopup

Bước 2: Chèn đoạn code sau đây vào trang cần hiển thị Popup

<div id="mopopup" class="lightbox-by-id lightbox-content lightbox-white mfp-hide">
//Nội dung Popup ở đây
</div>

Chú ý:

Thẻ ID trùng với link mở popup, ở ví dụ trên là mopopup
Nội dung Popup: Có thể là form, hình ảnh, text. . . Để dễ làm và tùy biến, nên tạo Block trong UX Blocks và chèn các nội dung phù hợp với nhu cầu, sau đó chèn Shortcode của Block Popup vào vị trí của nội dung popup.
Nên để đoạn code popup này vào cuối trang, có thể chèn trong Flatsome > Advanced > Global Settings > Footer

Việc còn lại là viết CSS để làm đẹp cho cái popup này. Chúc bạn thành công!

Về tôi

Minh Anh

Xin chia sẻ những phần việc nhỏ ở các dự án đã triển khai để tiện sử dụng lại ở những dự án khác, giúp rút ngắn thời gian hoàn thành sản phẩm, giảm chi phí cho đối tác và khách hàng.

0 0 đánh giá

Đánh giá bài viết

Theo dõi

0 Góp ý

Phản hồi nội tuyến

Xem tất cả bình luận