Bạn đã bao giờ nghe về thư viện có tên popper.js chưa? Thư viện này cho phép bạn tạo các cửa sổ bật lên trên JavaScript. Ngày nay, việc sử dụng popover khá phổ biến, đặc biệt là nó giúp hiển thị thêm thông tin về một phần tử cụ thể (nút, liên kết, v.v.). Lý do để xem xét cửa sổ bật lên động chủ yếu là để đảm bảo nó hiển thị ở đúng vị trí liên quan đến vị trí chủ thể trên màn hình. Cụ thể, nếu chủ thể ở dưới cùng của màn hình, cửa sổ bật lên sẽ hiển thị ở trên cùng. Nếu nó nằm ở đầu màn hình, cửa sổ bật lên sẽ hiển thị ở dưới cùng, v.v.
Trong hướng dẫn này, chúng ta sẽ khai thác sức mạnh của Popper.js trong Divi để tạo các cửa sổ bật lên động (menu nổi) khi một nút được nhấp vào. Điều này sẽ cho phép bất kỳ ai tạo cửa sổ bật lên với các phần tử Divi, để hiển thị bất kỳ nội dung nào sau một lần nhấp vào nút. Chúng tôi cũng sẽ đảm bảo cửa sổ bật lên là động, vì nó sẽ điều chỉnh vị trí của nó để duy trì khả năng hiển thị lý tưởng nhất khi người dùng tương tác với trang của bạn.
Đây là hình ảnh minh họa về vị trí của các cửa hàng popoversâ € ¦
Để đạt được điều này, chúng tôi sẽ cần một số CSS và JavaScript tùy chỉnh. Nhưng chúng ta vẫn có thể dựa vào khả năng thiết kế mạnh mẽ của Divi Builder để tạo cửa sổ bật lên bằng cách sử dụng bất kỳ phần tử Divi nào.
Tạo trang web tuyệt vời
Với trình tạo trang miễn phí tốt nhất Elementor
Bắt đầu bây giờHãy bắt đầu!
Xem trước Menu Nổi
Dưới đây là một cái nhìn nhanh về menu nổi mà chúng tôi sẽ thiết kế trong hướng dẫn này. Bạn có thể thấy vị trí của menu nổi thay đổi động như thế nào khi người dùng cuộn hoặc thay đổi kích thước trình duyệt. Cũng đừng bỏ lỡ mũi tên nhỏ cũng được định vị để tự động trỏ đến tham chiếu của nó (hoặc trong trường hợp này là nút).
Tạo Popover với Popper.js In Divi
Như chúng tôi đã nói trước đây, chúng tôi sẽ sử dụng popper.js trong Divi để tạo một cửa sổ bật lên được định vị động, được hiển thị khi nhấp vào chủ đề cửa sổ bật lên (nút). Với Divi, chúng tôi có thể dễ dàng tạo một menu nổi và một nút. Sau đó, sau đó chúng tôi sẽ thêm mã cần thiết để làm cho cả hai hoạt động hài hòa.
Phần
Vì vậy, chúng tôi sẽ bắt đầu bằng cách thêm ID khách hàng vào phần thông thường đã sẵn sàng theo mặc định. Mở cài đặt phần và thêm ID sau:
- ID CSS: popper-section
Tạo Popper Popover với Divi Row
Tiếp theo, chúng tôi sẽ thêm một hàng một cột vào phần này. Hàng này sẽ trở thành phần tử bật lên Popper của chúng tôi bật lên khi nhấp vào một nút.
Mở cài đặt hàng và cập nhật kiểu như sau:
- Màu nền: # 333333
- Chiều rộng máng xối: 2
- Chiều rộng: 100%
- Chiều rộng tối đa: 500px
- Đệm: 0px trên, 0px dưới, 0px trái, 0px phải
- Góc tròn: 10px
Vì hàng này sẽ trở thành phần tử bật lên popper của chúng tôi, chúng tôi cần thêm ID CSS để đóng vai trò là bộ chọn trong mã của chúng tôi. Chúng tôi cũng cần đảm bảo khả năng hiển thị vẫn ở mức tràn (nó bị che bởi các góc tròn).
Chuyển đến tab nâng cao và cập nhật những thứ sau:
- ID CSS: popper-popup
- Tràn ngang: hiển thị
- Tràn dọc: hiển thị
Hãy thêm nội dung vào hàng bật lên
Chúng ta có thể thêm bất kỳ (các) mô-đun nào mà chúng ta muốn vào hàng của mình để lấp đầy menu nổi với bất kỳ nội dung nào chúng ta muốn. Đối với ví dụ này, chúng tôi sẽ thêm một số nút vào hàng phục vụ như một menu tùy chỉnh xuất hiện trong cửa sổ bật lên.
Để bắt đầu, hãy thêm một mô-đun nút vào cột của hàng.
Bây giờ chúng ta hãy thêm một số kiểu dáng vào nút của chúng ta. Chúng tôi sẽ cập nhật cài đặt nút như sau:
- Căn chỉnh nút: trung tâm
- Sử dụng kiểu tùy chỉnh cho nút: CÓ
- Chiều rộng đường viền nút: 1px
- Màu viền nút: # 555555
- Bán kính đường viền nút: 10px
- Biểu tượng nút: xem ảnh chụp màn hình
- Lề: 20px trên, 20px dưới, 20px trái, 20px phải
- Đệm: 0,5em trên, 0,5em dưới, 2em trái, 2em phải
Quan trọng: Chúng tôi đang sử dụng lề trên mô-đun để tạo khoảng cách thay vì sử dụng khoảng cách hàng vì chúng tôi sẽ thêm một mũi tên (sử dụng dấu phân cách) cần được định vị trên cạnh của hàng (với vị trí tuyệt đối). Bất kỳ phần đệm hàng hoặc cột nào sẽ đẩy mũi tên ra khỏi cạnh.
Bây giờ, chúng ta cần thêm đoạn CSS tùy chỉnh sau vào Phần tử chính để làm cho nút kéo dài toàn bộ chiều rộng của cột / hàng:
display: block!important
Bây giờ bạn có thể sao chép nút hai (hoặc nhiều hơn) lần để thêm một vài nút nữa vào menu popover của chúng tôi.
Tạo Mũi tên bật lên
Popper.js hỗ trợ định vị mũi tên cùng với cửa sổ bật lên. Để tạo mũi tên, hãy thêm một dải phân cách mới dưới nút cuối cùng trong hàng của chúng ta.
Trong cài đặt dải phân cách, chọn không hiển thị dải phân cách. Sau đó, trong tab nâng cao, thêm ID CSS sau:
- ID CSS: popper-arrow
Chúng tôi sẽ sử dụng CSS bên ngoài tùy chỉnh để tạo kiểu và định vị mũi tên sau này.
Tạo Nút bật lên (hoặc Tham chiếu)
Hai yếu tố chính của popover popover bao gồm yếu tố popover (hoặc popper) và chủ đề mà popover tự gắn vào. Bạn có thể sử dụng bất kỳ phần tử Divi nào làm tham chiếu tạo cửa sổ bật lên, nhưng đối với ví dụ này, chúng tôi sẽ sử dụng một nút.
Tạo Chủ đề cho Popper: Nút
Trước khi chúng tôi tạo nút của mình, chúng tôi cần thêm một hàng một cột mới bên dưới hàng bật lên của chúng tôi.
Sau đó, thêm một mô-đun nút mới vào hàng.
Cập nhật cài đặt nút với một số kiểu cơ bản như sau:
- Màu văn bản nút: #ffffff
- Màu nền của nút: # a043e8
- Chiều rộng đường viền nút: 0px
- Bán kính đường viền nút: 10px
Tiếp theo, thêm ID CSS cần thiết sẽ cho phép chúng tôi nhắm mục tiêu và sử dụng nút làm tham chiếu cửa sổ bật lên của chúng tôi sau này:
- ID CSS: nút bật lên
Hãy thêm mã
Bây giờ cửa sổ bật lên và nút của chúng tôi đã hoàn tất, chúng tôi đã sẵn sàng thêm mã để làm cho điều kỳ diệu xảy ra.
Để thực hiện việc này, hãy thêm một mô-đun mã bên dưới mô-đun nút tham chiếu ở hàng thứ hai.
Điều quan trọng là mã phải ở cuối trang để nó hoạt động.
Đầu tiên, chúng ta sẽ thêm CSS.
Trong hộp nội dung mã, hãy thêm các thẻ style cần thiết để bọc CSS trong HTML. Sau đó, sao chép và dán CSS sau vào giữa các thẻ styleÂ:
/*hide and show popup styling*/#popper-popup {display: none;}#popper-popup[data-popper-reference-hidden] {visibility: hidden;pointer-events: none;}#popper-popup[show-popper] {display: block;z-index: 9999;}/*keep popper visible in the Divi Builder for editing*/#et-fb-app #popper-popup {display: block;}/*build the arrow targeting the divider with class 'popper-arrow'*/#popper-arrow,#popper-arrow::before {position: absolute;width: 8px;height: 8px;background: #333333;}#popper-arrow {visibility: hidden;}#popper-arrow::before {visibility: visible;content: "";transform: rotate(45deg);}/*position arrow using popper.js data-popper-placement attribute*/#popper-popup[data-popper-placement^="top"] #popper-arrow {bottom: -4px;}#popper-popup[data-popper-placement^="bottom"] #popper-arrow {top: -4px;}#popper-popup[data-popper-placement^="left"] #popper-arrow {right: -4px;}#popper-popup[data-popper-placement^="right"] #popper-arrow {left: -4px;}/*hide arrow when reference outside of viewport*/#popper-popup[data-popper-reference-hidden] #popper-arrow::before {visibility: hidden;}
Tiếp theo, chúng ta cần truy cập thư viện popper.js bằng cách thêm a script nhập Popper.js từ CDN của chúng (https://unpkg.com/@popperjs/core@2). Dưới thẻ phong cách cuối cùng, hãy dán tập lệnh sau vào hộp mã.
Sử dụng src sau trong thẻ script để nhập thư viện:
src="https://unpkg.com/@popperjs/core@2"
Nó sẽ giống như thế này:
Bây giờ chúng tôi sẽ nhập Popper.js trước khi thêm mã sẽ sử dụng nó. Vì vậy, sau khi script trỏ đến Popper.js, hãy thêm các thẻ script cần thiết để bao bọc Javascript mà chúng ta cần thêm. Sau đó, dán đoạn mã Javascript sau vào giữa các thẻ scriptÂ.
const popperButton = document.querySelector("#popper-button");const popperPopup = document.querySelector("#popper-popup");const popperSection = document.querySelector("#popper-section");const popperArrow = document.querySelector("#popper-arrow");letpopperInstance = null;//create popper instancefunctioncreateInstance() {popperInstance = Popper.createPopper(popperButton, popperPopup, {placement: "auto",//preferred placement of poppermodifiers: [{name: "offset",//offsets popper from the reference/buttonoptions: {offset: [0, 8],},},{name: "flip",//flips popper with allowed placementsoptions: {allowedAutoPlacements: ["right", "left", "top", "bottom"],rootBoundary: "viewport",},},],});}//destroy popper instancefunctiondestroyInstance() { if(popperInstance) {popperInstance.destroy();popperInstance = null;}}//show and create popperfunctionshowPopper() {popperPopup.setAttribute("show-popper", "");popperArrow.setAttribute("data-popper-arrow", "");createInstance();}//hide and destroy popper instancefunctionhidePopper() {popperPopup.removeAttribute("show-popper");popperArrow.removeAttribute("data-popper-arrow");destroyInstance();}//toggle show-popper attribute on popper to hide or show it with CSS functiontogglePopper() {if(popperPopup.hasAttribute("show-popper")) {hidePopper();} else{showPopper();}}//execute togglePopper function when clicking the popper reference/buttonpopperButton.addEventListener("click", function(e) {e.preventDefault();togglePopper();});
Đó là nó! Tất cả chúng ta đã hoàn thành. Bây giờ chúng ta hãy kiểm tra kết quả cuối cùng.
Xem trước kết quả cuối cùng
Để xem kết quả của hướng dẫn này, chúng tôi cần tạo một số không gian cuộn để kiểm tra phép thuật định vị của cửa sổ bật lên popper.
Để thực hiện việc này, hãy mở cài đặt phần và thêm một số lề như sau:
- Biên: trên cùng 80vh, dưới 80vh
Đây là chức năng trông như thế nào:
Lưu ý cách vị trí của cửa sổ bật lên (và mũi tên) thay đổi động khi người dùng cuộn hoặc thay đổi kích thước trình duyệt.
Tổng kết
Nếu bạn muốn tạo một cửa sổ bật lên bằng cách sử dụng popper.js trong Divi, bạn sẽ cần phải dựa vào một chút Javascript tốt, nhưng kết quả là xứng đáng. Vị trí động của cửa sổ bật lên là một thành phần giao diện người dùng tuyệt vời như vậy sẽ mang lại lợi ích cho bất kỳ trang web nào. Bạn nghĩ gì về điều này? Bạn đã thử chưa? Hãy cho chúng tôi biết.
