Ví dụ html bật lên

Hôm nay mình sẽ chỉ cho các bạn cách tạo 1 popup ngay góc màn hình mà không cần dùng plugin nhé, để dễ cấu hình các bạn có thể xem hình dưới đây nhé

Popup góc trái màn hình nhỏ xinh xinh

Đầu tiên chúng ta sẽ chèn hình ảnh vào vị trí muốn hiển thị nhé, ở đây có 2 cách, 1 là dùng code HTML 2 là dùng block của Flatsome các bạn muốn dùng cách nào cũng được. Mình sẽ luôn hướng dẫn 2 cách để các bạn có thể áp dụng cho theme của mình

Chèn image vào Block Footer

Ở đây footer mình là 1 block nên mình sẽ tận dụng cái này để chèn hình ảnh vào luôn nhé

Mình sẽ tạo 1 section với class btn-dungthu, text và image với class là img-popup ở cuối cùng của block footer như thế này, phần Div mình sẽ đặt class là before-img, các bạn có thể copy shortcode dưới đây để pass

[/section]
[section class="btn-dungthu"]
[ux_image id="4969" image_size="thumbnail" link="#" class="img-popup"]
[/section]

Tạo hình ảnh muốn hiển thị trong cửa sổ bật lên

And set class for it is img-popup

Như vậy là xong bước hiển thị bằng khối

Chèn hình ảnh bằng html

Thay vì làm bằng block, các bạn hoàn toàn có thể tạo bằng HTML cũng được, sau đó các bạn hook vào vị trí mà trang nào cũng xuất hiện, ở đây mình sẽ hook vào phần footer nhé (Trang nào không có footer)

Các bạn có thể tham khảo thêm bài viết trình bày các hook của Flatsome để biết vị trí của các hook nhé

function img_popup(){;?>
    

	

	

		
			

		
	
    
CSS and JS to display
Sau đó chúng ta sẽ tiến hành CSS và JS cho nó nữa là xong
.btn-dungthu {
    display: none;
    position: fixed;
    bottom: 15px;
    left: 20px;
    z-index: 999;
    padding-bottom: 0!important;
}
.img-popup img {
    width: 150px!important;
}
.before-img {
    border: 3px solid #fff;
    border-radius: 50px;
    content: '';
    display: block;
    z-index: 99;
    position: absolute;
    width: 25px;
    height: 25px;
    top: -10px;
    left: 135px;
    background: url(https://thebeautyofjones.com/wp-content/uploads/2021/01/close.png) center center no-repeat;
    background-size: 20px 20px;
    opacity: 1;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.5s, background-size 0.5s, opacity ease-in-out .25s;
    -moz-transition: -moz-transform 0.5s, background-size 0.5s, opacity ease-in-out .25s;
    -o-transition: -o-transform 0.5s, background-size 0.5s, opacity ease-in-out .25s;
    transition: transform 0.5s, background-size 0.5s, opacity ease-in-out .25s;
}
.hide-imt{
    display:none!important
}
Ở đoạn css 23 các bạn chú ý đổi lại nền dấu X của mình nhé, không sau này mình off demo là nó mất đó
 
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á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 một trang), trong ví dụ trên cửa sổ bật lên có id là #myModal
data-toggle="modal" is command open a Modal Popup in Bootstrap
Bạn có thể sử dụng button hoặc thẻ  hoặc  để gọi popup nhưng phải luôn có 2 thuộc tính ở trên.
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
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" là dùng để close popup. Để định dạng thành phần close popup, 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ể close được popup. Ngoài ra, bạn có thể thêm class="close" để sử dụng sẵn css 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
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
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

Small modal


  

    

     This is body of small modal
    
  

Hiển thị kết quả

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

Hãy để ý kỹ, trong

Đọc tiếp