Tạo một cửa sổ bật lên jQuery. Tự làm nhọt nổi
PopUP là một quảng cáo bật lên được thiết kế để thu hút lưu lượng truy cập web hoặc thu thập địa chỉ email. Những yếu tố như vậy thường là các hình thức quảng cáo trên Internet trên WorldWideWeb. Thông thường, đây là những cửa sổ mới mở trong trình duyệt web để hiển thị quảng cáo. Chúng thường được tạo bằng JavaScript bằng cách sử dụng tập lệnh chéo trang (XSS), đôi khi có tải trọng phụ và sử dụng AdobeFlash.
Một biến thể của PopUP là các quảng cáo bật lên mở trong cửa sổ trình duyệt mới ẩn trong cửa sổ trình duyệt đang hoạt động.
Lịch sử xuất xứQuảng cáo bật lên đầu tiên xuất hiện trên Tripod.com vào cuối những năm 1990. Ethan Zuckerman tuyên bố rằng ông đã viết mã để chạy quảng cáo trong từng cửa sổ riêng lẻ để đáp lại những phàn nàn về quảng cáo biểu ngữ. Sau đó, nhà phát triển liên tục xin lỗi về sự bất tiện mà phát minh của mình bắt đầu gây ra.
Opera là trình duyệt lớn đầu tiên có các công cụ chặn cửa sổ bật lên. Trình duyệt Mozilla sau đó đã cải thiện những phát triển này bằng cách bắt đầu chặn cửa sổ PopUP được tạo khi tải trang. Vào đầu những năm 2000, tất cả các trình duyệt web chính ngoại trừ trình duyệt web IE, cho phép người dùng loại bỏ gần như hoàn toàn các quảng cáo bật lên không mong muốn. Năm 2004, Microsoft phát hành Windows XP SP2, bổ sung tính năng chặn cho trình duyệt này.
Hầu hết các trình duyệt hiện đại đều có công cụ bảo vệ cửa sổ bật lên. Công cụ của bên thứ ba thường bao gồm các tính năng khác, chẳng hạn như lọc quảng cáo.
Cửa sổ bật lênMột số loại nội dung có thể tải xuống là hình ảnh, âm nhạc miễn phí và những thứ khác - có thể gây ra cửa sổ bật lên. Ngoài ra, đôi khi chúng trông giống như các trang web bình thường và tên trang web sẽ xuất hiện trên thanh tìm kiếm. Nhiều tài nguyên sử dụng cửa sổ bật lên để hiển thị thông tin mà không làm gián đoạn nội dung hiện đang mở. khoảnh khắc này trang. Ví dụ: nếu bạn điền vào biểu mẫu trên một trang web và cần thêm hướng dẫn, cửa sổ PopUP sẽ cung cấp cho bạn Thông tin thêm mà không làm mất bất kỳ dữ liệu nào đã được nhập vào biểu mẫu. Hầu hết các trình chặn quảng cáo bật lên đều cho phép loại tải xuống này.
Nhưng bạn cần nhớ rằng một số trình cài đặt web, chẳng hạn như trình cài đặt được McAfee sử dụng, sử dụng cửa sổ bật lên để cài đặt phần mềm. Trên nhiều trình duyệt Internet, nhấn Phím Ctrl Nhấp vào liên kết sẽ bỏ qua bộ lọc.
Trong trường hợp này, việc nhấp vào (thậm chí vô tình) vào một cửa sổ bật lên có thể dẫn đến việc mở các cửa sổ khác.
Bỏ qua trình chặn cửa sổ bật lênSự kết hợp giữa quảng cáo biểu ngữ và cửa sổ bật lên là "quảng cáo di chuột" sử dụng DHTML để hiển thị trên màn hình ở đầu nội dung trang. VỚI sử dụng JavaScript quảng cáo có thể được phủ lên đầu trang web trong lớp trong suốt. Quảng cáo này có thể xuất hiện trong hầu hết các trường hợp mà nhà quảng cáo muốn nó xuất hiện. Tập lệnh cửa sổ PopUP như vậy không thể được nhận thấy trước. Ví dụ: một quảng cáo có thể chứa hoạt ảnh AdobeFlash được liên kết với trang web của nhà quảng cáo. Nó cũng có thể trông giống như một cửa sổ thông thường. Vì quảng cáo là một phần của trang web nên không thể chặn quảng cáo bằng trình chặn nhưng có thể ngăn quảng cáo mở bằng cách sử dụng ứng dụng bên thứ ba(như AdBlock và AdblockPlus) hoặc sử dụng biểu định kiểu tùy chỉnh.
Quảng cáo này tương tự như cửa sổ PopUP thông thường nhưng nó xuất hiện ẩn sau cửa sổ trình duyệt chính thay vì xuất hiện ở phía trước. Quảng cáo bật lên trở nên phổ biến và chiếm lĩnh từ khi nào? toàn bộ màn hình máy tính, nhiều người dùng đã học cách đóng chúng ngay lập tức mà không cần nhìn. Đó là lý do tại sao PopUNDER xuất hiện, không cản trở việc người dùng xem nội dung trang web. Chúng thường không bị phát hiện cho đến khi cửa sổ trình duyệt chính được đóng hoặc thu nhỏ. Nghiên cứu đã chỉ ra rằng người dùng phản hồi tốt hơn với những quảng cáo này so với quảng cáo bật lên vì chúng không có vẻ xâm phạm.
TRONG quảng cáo có hai cái rất đơn giản liên quan Hàm JavaScript, được giới thiệu vào năm 1997 với trình duyệt Netscape 2.0B3. Phương pháp này được sử dụng rộng rãi trên Internet. Các nhà xuất bản và nhà quảng cáo web hiện đại sử dụng nó để tạo một cửa sổ phía trước nội dung trang, tải quảng cáo và sau đó gửi nó ra phía sau màn hình.
Hầu hết các trình duyệt hiện đại chỉ cho phép mở cửa sổ bật lên PopUP khi có một số tương tác của người dùng (chẳng hạn như nhấp chuột). Mọi cuộc gọi không tương tác ( gọi lại hẹn giờ, sự kiện tải, v.v.) sẽ dẫn đến chặn cửa sổ mới. Để khắc phục hạn chế này, hầu hết các quảng cáo bật lên đều được kích hoạt bằng cách sử dụng trình xử lý sự kiện chuột được gắn trực tiếp vào tài liệu hoặc nội dung tài liệu. Điều này cho phép bạn nắm bắt tất cả các lần nhấp chuột trên trang mà các trình xử lý sự kiện khác không sử dụng. Ví dụ: khi người dùng chọn văn bản, thao tác nhấp chuột sẽ được phát hiện bởi trình nghe gắn liền với tài liệu. Thao tác này sẽ mở một cửa sổ bật lên bằng mã trên.
Người dùng các trang web và ứng dụng web khác nhau liên tục gặp phải các cửa sổ bật lên không mong muốn khi sử dụng trình duyệt. Thông thường, cửa sổ PopUP như vậy sẽ bị xóa bằng chức năng “đóng” hoặc “hủy”. Vì đây là phản hồi thông thường của người dùng nên các nhà phát triển bắt đầu sử dụng một số thủ thuật. Vì vậy, khi phát triển tin nhắn quảng cáođang được tạo ra các nút trên màn hình hoặc các điều khiển tương tự như tùy chọn "đóng" hoặc "hủy". Tuy nhiên, khi người dùng chọn một trong các tùy chọn này, nút sẽ thực hiện một hành động không mong muốn hoặc trái phép (ví dụ: mở một cửa sổ bật lên mới hoặc tải một tệp không mong muốn xuống hệ thống của người dùng).
Bởi vì công nghệ thiết kế web cho phép tác giả sử dụng bất kỳ hình thức “giả mạo” nào, nên một số người dùng hoàn toàn từ chối nhấp vào hoặc tương tác với bất kỳ thành phần nào bên trong cửa sổ bật lên.
Đôi khi các URL được chuyển hướng đến trang quảng cáo bằng cách sử dụng chức năng chuyển hướng URL nền. Đôi khi chúng mở trong một tab mới và sau đó nội dung của tab nền cũ được thay thế bằng các trang quảng cáo sử dụng chuyển hướng. AdblockPlus, uBlock hoặc NoScript không thể chặn các chuyển hướng bật lên này. Tính năng này ngày càng được các nhà phân phối quảng cáo sử dụng để tìm cách làm cho cửa sổ PopUP hoạt động tích cực nhất.
Làm thế nào để thoát khỏi cửa sổ bật lênLàm cách nào để loại bỏ quảng cáo trong trình duyệt? Trước hết, hãy kiểm tra các bản cập nhật. Luôn cập nhật trình duyệt của bạn sẽ có tầm quan trọng lớn trong cuộc chiến chống lại cửa sổ bật lên. Hầu hết các trình duyệt được thiết lập để cập nhật tự động, nhưng bạn có thể tắt tính năng này. Quá trình này thường chỉ mất vài phút.
- Firefox: Nhấp vào nút tên ứng dụng ở góc trên cùng bên trái. Di chuột qua Trợ giúp và chọn Giới thiệu về Firefox. Thao tác này sẽ mở một cửa sổ có thông tin phiên bản trình duyệt. Nếu trình duyệt của bạn không tự động tải xuống và cài đặt.
- Chrome: Nhấp vào nút menu bên phải góc trên cùng. Chọn "Giới thiệu về Chrome" ở dưới cùng, nó sẽ mở ra phần mới và trình duyệt sẽ kiểm tra các bản cập nhật. Nếu có, chúng sẽ được cài đặt tự động.
- Internet Explorer: Phương pháp cập nhật tùy thuộc vào phiên bản trình duyệt bạn đang sử dụng. Đối với các tùy chọn cũ hơn, bạn sẽ cần phải đăng nhập vào Trung tâm Cập nhật Windows. Đối với Internet Explorer 10 và 11, bạn có thể kích hoạt cập nhật tự động bằng cách nhấp vào biểu tượng Bánh răng và chọn Giới thiệu về Internet Explorer.
Đôi khi PopUP của trang web và phần mềm tương tự được nhúng quá sâu nên không thể xóa bằng cách cập nhật. TRONG trường hợp tương tự Cài đặt lại hoặc thay đổi trình duyệt web của bạn có thể giúp giải quyết vấn đề.
Tải xuống lần đầu phiên bản mới nhất trình duyệt bạn muốn sử dụng. Bạn có thể tìm thấy liên kết tải xuống trên trang chính của mỗi ứng dụng.
26/09/14 23KĐối với nhiều người dùng Internet, thuật ngữ “cửa sổ bật lên” gợi lên những liên tưởng tiêu cực. Một hình ảnh ngay lập tức “lơ lửng” trước mắt bạn khi bạn cố gắng xem trên trang web thông tin cần thiết Tên khốn này đang che đậy đoạn văn bản được yêu cầu. Điều tệ hơn nữa là nếu bạn cố gắng đóng nó, người dùng thường được chuyển hoàn toàn sang một tài nguyên khác.
Những cửa sổ bật lên này của bạn có phải là một thứ khốn nạn không?Bất chấp danh tiếng xấu này, cửa sổ bật lên có thể hữu ích cũng như gây khó chịu. Ban đầu, chúng chỉ là một loại hộp thoại được sử dụng trong lập trình như các thành phần của giao diện người dùng.
Chúng phục vụ thông tin và là phương tiện đối thoại giữa người dùng và chương trình (ứng dụng web). Nhưng thật không may, thái độ tiêu cực như vậy của nhiều người dùng đối với cửa sổ bật lên phần lớn là chính đáng, bởi vì trên Internet, chúng chủ yếu được sử dụng cho mục đích quảng cáo.
- Mở ở nền trước (cửa sổ bật lên) - bật lên phía trên cửa sổ chính;
- Mở ở chế độ nền (pop-under) - mở phía sau cửa sổ chính.
Sau này là xảo quyệt nhất. Chúng chỉ hoạt động và hiển thị cho người dùng sau khi đóng cái chính. Vì vậy, sẽ không thể xác định được nguồn gốc của chúng và chặn chúng kịp thời.
Phương tiện đấu tranhDo việc sử dụng rộng rãi các cửa sổ bật lên cho quảng cáo không mong muốn Trên Internet, nhiều nhà phát triển phần mềm đã bắt đầu xây dựng các biện pháp đối phó vào sản phẩm của mình.
Chương trình chính để sử dụng Internet là trình duyệt. Vì vậy, cách chính để chặn một hành động là cửa sổ quảng cáođược triển khai chính xác trong trình duyệt:
- Internet Explorer - đã trở thành cuối cùng sản phẩm phần mềm, đã triển khai khả năng chặn quảng cáo bật lên. Việc này chỉ được thực hiện vào năm 2004;
- Opera - sản phẩm này là trình duyệt đầu tiên trên thế giới được tích hợp sẵn trình chặn cửa sổ bật lên. Cửa sổ bật lên trong Opera có thể bị chặn từ năm 2000;
- Mozilla Firefox - Trình duyệt này đã cải tiến phương pháp chống quảng cáo đã được triển khai trong Opera. Ngược lại, trong Mozilla, không phải tất cả các quảng cáo bật lên đều bị chặn mà chỉ những quảng cáo được tải khi cửa sổ chính được mở.
TRONG trình duyệt hiện đại Hệ thống chặn cửa sổ bật lên có thể được cấu hình thông qua giao diện người dùng. Chrome, giống như hầu hết các trình duyệt khác, có khả năng bật hoặc tắt tính năng chặn cũng như tạo danh sách ngoại lệ (trang web đáng tin cậy):
Trong lập trình web, một số công nghệ được sử dụng để tạo cửa sổ bật lên. Phương tiện chính để tạo ra chúng vẫn là javascript. Chức năng của nó bao gồm một số loại hộp thoại, hoạt động của chúng tương tự như hoạt động của các cửa sổ bật lên:
- Phương thức Alert() hiển thị thông thường tin nhắn văn bản. Để ẩn đoạn hội thoại sau khi đọc, bạn cần nhấp vào nút “Ok” ở cuối cửa sổ;
- Phương thức confirm() tương tự như phương thức trước đó. Nhưng hộp thoại nó hiển thị, ngoài “Ok”, còn được trang bị nút “Hủy”. Với sự trợ giúp của họ, người dùng có thể chấp nhận hoặc từ chối điều kiện được chỉ định trong cửa sổ;
- Phương thức nhắc() được sử dụng để gọi một loại cửa sổ bật lên khác cửa sổ javascript. Không giống như những gì đã đề cập ở trên, cửa sổ này cũng được trang bị trương Văn bản. Người dùng có thể nhập dữ liệu văn bản vào đó, dữ liệu này có thể được gán cho giá trị của biến mong muốn.
Hoạt động của cả ba phương thức và kiểu đối thoại mà chúng gọi đều được thể hiện trong hình:
Nhưng đây chỉ là những kiểu đối thoại. Để tạo một cửa sổ bật lên thực sự trong javascript, bạn sử dụng phương thức open() của đối tượng cửa sổ.
Đây là cú pháp phương thức đầy đủ:
thắng = cửa sổ. open (url, tên, thông số) , trong đó:
- url là địa chỉ của trang sẽ mở trong cửa sổ mới;
- Tên – tên của cửa sổ được tạo. Có thể được sử dụng để xử lý thêm dưới dạng biểu mẫu (tham số đích);
- Params – một chuỗi tham số cho cửa sổ mới. Của họ danh sách đầy đủ Bạn có thể tự tìm hiểu từ tài liệu javascript.
Hình ảnh bên dưới hiển thị phương thức đang hoạt động và cung cấp tập lệnh bật lên được đơn giản hóa:
Một hàm f1 được tạo, phần thân của hàm này thực hiện lệnh gọi phương pháp cửa sổ. mở() . Sau đó có một cuộc gọi phương pháp này với một tham số cho biết địa chỉ của trang sẽ mở trong cửa sổ đã tạo. Sau đó, phương thức setTimeout() được gọi. Hàm f1 và khoảng thời gian sau đó một cửa sổ mới sẽ mở được truyền cho nó dưới dạng tham số.
Tạo một cửa sổ bật lên với sử dụng CSSBạn cũng có thể tạo cửa sổ bật lên bằng CSS. Tính năng này chỉ được hiện thực hóa khi phát hành phiên bản thứ ba của công nghệ này. Bạn không nên lạm dụng tùy chọn này vì nó sẽ chỉ hoạt động trong các phiên bản trình duyệt mới nhất:
Như bạn có thể thấy trong hình, một cửa sổ phương thức như vậy được tạo bằng CSS và html. Không giống như những cửa sổ được tạo bằng js, cửa sổ bật lên này không thể di chuyển xung quanh trang. Ngoài ra, mã của nó quá cồng kềnh để mô tả trong phạm vi bài viết này. Nhưng một cửa sổ như vậy sẽ không bị trình duyệt chặn.
Đánh giá các công nghệ khácHoàn toàn không cần thiết phải tự mình phát triển một cửa sổ bật lên. Ngày nay rất nhiều thứ đã được tạo ra cho việc này plugin miễn phí trên jquery. Bằng cách kết nối một trong số chúng, bạn sẽ có được một cửa sổ hoàn thiện.
Ngoài ra còn có nhiều plugin dành cho CMS phổ biến. Chúng có thể bao gồm cả một bộ cửa sổ. Thiết kế và chức năng của mỗi trong số chúng đều được “điều chỉnh” để thực hiện một nhiệm vụ cụ thể (đăng ký, gửi tin nhắn, v.v.).
Ngoài ra còn có một số kịch bản phổ biến. Một ví dụ về một trong số họ sẽ được đưa ra dưới đây. Cửa sổ bật lên trong Liên hệ và các mạng xã hội phổ biến khác hoạt động theo nguyên tắc này:
Cách tạo cửa sổ bật lên trong Jquery $(document).ready(function())( PopUpHide(); )); hàm PopUpShow())( $("#window-popup").show(); ) function PopUpHide())( $("#window-popup").hide(); ) .box ( width: 400px; Height : 300px ; màu nền: #ccc; phần đệm: 10px; màu: #fff; .popup ( chiều rộng: 100%; chiều cao tối thiểu: 100%; màu nền: rgba 0,0,0,0,5); ẩn; vị trí: đã sửa; top: 0px; .popup .popup-content (lề: tự động 40px; chiều rộng: 200px; chiều cao: 80px; phần đệm: 10px; màu: #c5c5c5; bán kính đường viền: 5px; bóng hộp: 0px 0px 10px #000;
Hiển thị cửa sổ bật lên Xin chúc mừng, bạn đã tạo một cửa sổ bật lên!!! Ẩn cửa sổ bật lên
Mã được cung cấp trong phiên bản "dành cho người lười biếng". Bằng cách dán nó vào bất kỳ trình soạn thảo nào và chạy nó, bạn sẽ nhận được ví dụ làm sẵn cửa sổ bật lên dựa trên jquery.
Cửa sổ bật lên bên ngoài có quảng cáo là những ý tưởng tồi tệ! Tất cả các quản trị viên web lành mạnh sẽ không bao giờ khuyên bạn sử dụng chúng trên trang web của mình. Nhưng nếu Chúng ta đang nói về về cửa sổ bật lên nội bộ - cái này yếu tố hữu ích, cung cấp thêm thông tin, cảnh báo, ngăn chặn, đưa ra các tùy chọn và hơn thế nữa.
Chúng ta sẽ tạo ra cái gì?Trong hướng dẫn này, chúng ta sẽ tạo ra một thứ đơn giản và đẹp mắt cửa sổ bật lên trên jquery. Nó sẽ tương tự như những gì được sử dụng trên Twitter. Đương nhiên, bạn có thể tạo cho nó phong cách bạn thích.
Cửa sổ sẽ có chức năng gì?- Chúng tôi muốn nó được căn giữa trên trang web khi nó được hiển thị.
- Cần có nút “đóng” hoặc nút nào đó tương tự.
- Khi chúng ta bấm vào bên ngoài khối, cửa sổ bật lên sẽ tự động đóng lại.
- Khi cửa sổ được hiển thị, trang phải được bao phủ trong bóng tối để người dùng có thể tập trung.
Để triển khai cửa sổ bật lên, chúng tôi sẽ sử dụng CSS và một vài dòng mã jQuery và tất nhiên là HTML. Xin lưu ý rằng để thực hiện ý tưởng của chúng tôi, bạn không cần bất kỳ plugin nào và công cụ bổ sung, mọi thứ đều rất đơn giản và đáng tin cậy!
Nhấp vào tôi X Some Title Goes Here: Một số nội dung khác, khi bạn muốn thêm một chút nữa
Hộp bật lên ( vị trí: tuyệt đối; bán kính đường viền: 5px; nền: #fff; hiển thị: không có; bóng hộp: 1px 1px 5px rgba(0,0,0,0.2); họ phông chữ: Arial, sans-serif ; chỉ mục z: 9999999; cỡ chữ: 14px; .popup-box .close ( vị trí: tuyệt đối; trên cùng: 0px; phải: 0px; họ phông chữ: Arial, Helvetica, sans-serif; độ dày phông chữ: đậm ; con trỏ: con trỏ; màu: #434343; cỡ chữ: 20px; .popup-box .close:hover ( color: #000; ) .popup-box h2 ( đệm: 0; lề: 0; cỡ chữ: 18px; .popup-box .top ( đệm: 20px; ) .popup-box .bottom ( nền: #eee; border-top: 1px Solid #e5e5e5; đệm: 20px; viền-dưới-trái- bán kính: 5px; viền-dưới -bán kính bên phải: 5px; ) #mất điện ( nền: rgba(0,0,0,0.3); vị trí: tuyệt đối; trên cùng: 0; tràn: ẩn; z-index: 999999; left : 0; display: none;
Chúng tôi sẽ xác định một số người khác Kiểu CSS V. Mã JavaScript. Những kiểu này yêu cầu tính toán bổ sung, vì vậy sẽ tốt hơn nếu thực hiện bằng jQuery. Hãy chuyển sang mã javascript.
Mã bật lên cửa sổ jQueryĐể bắt đầu, hãy kết nối tập tin jQuery thư viện. Sau đó, chúng ta khởi tạo jQuery và thêm div #blackout vào phần nội dung của tài liệu. Chúng tôi cũng xác định chiều rộng của cửa sổ bật lên.
$(document).ready(function() ( $("body").append(""); var boxWidth = 400;
Tiếp theo, chúng ta tạo một hàm căn giữa cửa sổ. Trước đây chúng tôi đặt vị trí tuyệt đối trong CSS, chúng tôi không thể sử dụng lề: 0px auto; chúng ta cần xác định chiều rộng của màn hình, trừ chiều rộng của cửa sổ bật lên khỏi chiều rộng này và chia tất cả chiều rộng này cho 2. Chiều cao sẽ là vị trí cuộn hiện tại, cộng thêm khoảng 150px.
Trước đó một chút, chúng tôi đã tạo div #blackout, mục đích này là để che nội dung trang bằng bóng. Bây giờ chúng ta cần đảm bảo rằng khối này sẽ có cùng chiều rộng và chiều cao với màn hình. Điều này cũng được tính toán trong hàm này.
function centerBox() ( /* xác định dữ liệu cần thiết */ var winWidth = $(window).width(); var winHeight = $(document).height(); var ScrollPos = $(window).scrollTop(); / * Tính vị trí */ var disWidth = (winWidth - boxWidth) / 2 var disHeight = ScrollPos + 150; /* Thêm kiểu cho các khối */ $(".popup-box").css(("width" : boxWidth+ "px" , "left" : disWidth+"px", "top" : disHeight+"px")); $("#blackout").css(("width" : winWidth+"px", "height" : winHeight+" px") ; trả về sai ;
Chức năng này phải được chạy 3 lần. Khi người dùng cuộn, khi người dùng thay đổi kích thước cửa sổ, ban đầu cũng là khi tải trang.
$(window).resize(centerBox); $(window).scroll(centerBox); centerBox();
Cuối cùng, chúng ta cần thiết lập các sự kiện nhấp chuột. Khi người dùng nhấp vào khu vực bên ngoài cửa sổ, khu vực đó sẽ đóng lại. Khi người dùng nhấp vào "X", cửa sổ cũng sẽ biến mất. Trong trường hợp nhấp chuột vào bên trong cửa sổ bật lên, sẽ không có gì xảy ra. Các nhận xét đã được thêm vào mã để dễ hiểu hơn.
$("").click(function(e) ( /* Ngăn chặn các hành động mặc định */ e.preventDefault(); e.stopPropagation(); /* Lấy id ( số cuối cùng trong tên lớp liên kết) */ var name = $(this).attr("class"); var id = tên; var ScrollPos = $(window).scrollTop(); /* Hiển thị chính xác cửa sổ bật lên, che bóng, ngăn không cho cuộn */ $("#popup-box-"+id).show(); $("#mất điện").show(); $("html,body").css("tràn", "ẩn"); /* Sửa lỗi trong Firefox */ $("html").scrollTop(scrollPos); )); $("").click(function(e) ( /* Ngăn liên kết hoạt động nếu đó là cửa sổ bật lên của chúng tôi */ e.stopPropagation(); )); $("html").click(function() ( var ScrollPos = $(window).scrollTop(); /* Ẩn cửa sổ khi được nhấp vào bên ngoài khu vực của nó */ $("").hide(); $(" #blackout").hide(); $("html,body").css("overflow","auto"); $("html").scrollTop(scrollPos); )); $(".close").click(function() ( var ScrollPos = $(window).scrollTop(); /* Ẩn bóng và cửa sổ khi người dùng nhấp vào X */ $("").hide() ; $("#blackout").hide(); $("html,body").css("overflow","auto"); $("html").scrollTop(scrollPos)); ));
Như vậy, việc tạo cửa sổ bật lên bằng jQuery đã hoàn tất! Chúng ta không cần tải plugin và viết các hàm phức tạp, chỉ cần một vài dòng mã. Bạn có thể tải xuống các nguồn và xem cách nó hoạt động cục bộ trên máy tính của bạn.
Có một thực tế ai cũng biết: hầu hết khách truy cập không mua hàng trong lần truy cập đầu tiên. trang sản phẩm cửa hàng trực tuyến và thậm chí không để lại khách hàng tiềm năng - nhưng phần lớn này lớn đến mức nào?
Theo nghiên cứu của công ty See Why, trường hợp này xảy ra với 99% khách truy cập lần đầu tiên truy cập tài nguyên. Tất nhiên, chúng ta đang nói chủ yếu về các trang web Thương mại điện tử, nhưng câu hỏi vẫn được đặt ra: nếu 99% khách truy cập không mua bất cứ thứ gì trong lần truy cập đầu tiên, thì làm thế nào để khuyến khích họ quay lại?
Tin vui là có số liệu thống kê sau: 75% du khách vẫn sẵn sàng quay lại sau để hoàn tất việc mua hàng.
Cho dù bạn cảm thấy thế nào về cửa sổ bật lên, kỹ thuật tiếp thị này vẫn hiệu quả trong việc thu hút sự chú ý và thu thập dữ liệu liên hệ (tạo khách hàng tiềm năng).
Nói một cách đơn giản, sử dụng cửa sổ bật lên là cách nhanh nhất để đưa khách truy cập quay lại trang đích.
Tại sao?
Điều này liên quan đến một kỹ thuật thuyết phục được gọi là “ngắt theo khuôn mẫu” - khi sự chú ý của bạn, bị ru ngủ bởi một nhịp điệu hoặc trình tự tường thuật cụ thể, đột nhiên bị thu hút mạnh mẽ vào một điều gì đó bất ngờ. Bạn thường gặp phải hiệu ứng này khi xem phim, xem phim hài và thậm chí trong các cuộc đàm phán quan trọng.
Nếu chúng ta nói về nội dung và tiếp thị qua email, “gián đoạn theo mẫu” sẽ hiệu quả nhất khi người đọc đã cam kết giải quyết vấn đề và tiếp tục tương tác (đăng ký nhận bản tin, mua hàng, v.v.).
Một ví dụ từ dịch vụ Made.com. Các nhà tiếp thị cung cấp cho khách truy cập một phiếu thưởng miễn phí trị giá 10 euro chỉ với một chi phí nhỏ - một địa chỉ email. Điều này đã được thực hiện bởi vì:
Theo ExactTarget, E-mail là kênh tiếp thị được khách hàng ưa thích nhất, vì 77% người tiêu dùng thích gửi email hơn các kênh tương tác khác với thương hiệu.
Có lẽ rốt cuộc cửa sổ bật lên không quá tệ?
Rất có thể bạn ghét cửa sổ bật lên và bạn có quyền làm như vậy. Tất nhiên, ai lại muốn thấy thứ gì đó như thế này ngay sau khi truy cập trang đích:
Hoặc thế này:
Có thể bạn chưa biết về lĩnh vực hoạt động của công ty nhưng bạn đã bị che kín đến tận cổ rồi cửa sổ bật lên hướng lên. Các ví dụ trên không thành công: trước hết, khách truy cập muốn tìm hiểu thêm về thương hiệu, sau đó tải xuống “Hướng dẫn miễn phí về tạo lưu lượng truy cập”, “Miễn phí sách điện tử", v.v. Tất nhiên, hầu hết người dùng đều ghét những điều như vậy và phản ứng bằng cách từ chối tương tác thêm với thương hiệu.
Có lẽ bạn nên hạ nhiệt một chút và xem kết quả kiểm tra. Những con số nói lên điều gì? Đây là dữ liệu từ thử nghiệm phân tách của một cửa sổ bật lên và nút “Không, cảm ơn” trên một ưu đãi bật lên.
| Chữ | Số lượt xem | Số lượng email được thu thập | Tỷ lệ chuyển đổi |
| Không, cám ơn. Tôi thích trả giá đầy đủ hơn | 165 416 | 9928 | 6,0% |
| Tôi không quan tâm đến điều này | 165 625 | 7961 | 4,81% |
| Không, cám ơn | 165 021 | 7616 | 4,62% |
| KHÔNG | 166 072 | 7433 | 4,48% |
Ấn tượng? Sau đó, hãy xem kết quả của các công ty sử dụng hiệu quả phương pháp này.
1. Trải nghiệm với cửa sổ bật lên
Trong một ngày thông thường, dịch vụ WP Beginner nhận được khoảng 70-80 người đăng ký mới nhờ Các phương pháp khác nhau thế hệ dẫn đầu. Nhưng cơ sở đăng ký càng lớn thì kinh doanh thành công hơn, vì vậy các nhà tiếp thị của dịch vụ đã quyết định thử nghiệm cửa sổ bật lên.
Thứ đã qua?
Một cửa sổ bật lên đã được phát triển để xuất hiện khi người dùng có ý định rời khỏi trang web. Hiệu quả đạt được nhờ công nghệ theo dõi con trỏ và các phương pháp khác. Cửa sổ trông như thế này:
Kết quả là gì?
Sử dụng cửa sổ bật lên những trang quan trọng nhất(không phải trên toàn bộ trang web) đã tăng số lượng đăng ký lên 660%. Nghĩa là, từ 70-80 khách hàng tiềm năng, dịch vụ đã chuyển sang 445-470 khách hàng tiềm năng mỗi ngày - một bước nhảy vọt lên một tầm cao mới về chất lượng.
Trường hợp tiếp theo là từ Backlinko. Sau khi thêm CTA vào trang đích kèm theo lời đề nghị đăng ký nhận bản tin, tỷ lệ chuyển đổi đã giảm xuống 1,73% - một điều cần phải thực hiện khẩn cấp. Các nhà tiếp thị của công ty đã phát triển một cửa sổ bật lên xuất hiện trước mặt những người dùng quyết định rời khỏi trang đích. Đây là những gì nó trông giống như:
Hãy nhớ rằng chuyển đổi là khoảng 1,7% trước khi sử dụng cửa sổ bật lên? 2 ngày sau khi cửa sổ bật lên ra mắt, số liệu thống kê đã thay đổi. Chỉ trong hai ngày, tỷ lệ chuyển đổi đã tăng từ 1,73% lên 4,83% - hơn 2 lần!
Tất nhiên, trong một thế giới mà một bài kiểm tra hiệu quả có thể tăng tỷ lệ chuyển đổi lên 100, 300%, thậm chí 1300%, kết quả của thử nghiệm này có vẻ khiêm tốn. Tuy nhiên, điều này không hoàn toàn đúng.
Trước hết, với lượng người đăng ký lớn, các nhà tiếp thị có thể tạo nội dung phù hợp với khán giả của mình và thiết lập hệ thống bán kèm. Do đó, khi tính đến doanh số bán thêm và các yếu tố khác, một người liên hệ sẽ mang lại cho dịch vụ mức trung bình là 15 USD.
Nếu cửa sổ bật lên mang lại thêm 15 người đăng ký mỗi ngày thì thu nhập hàng ngày sẽ tăng trung bình lần lượt là 225 USD và thu nhập hàng năm lần lượt là 82.125 USD. Một khoản thu nhập không tồi cho 2 phút kiểm tra cài đặt phải không?
Rõ ràng những người ghét cửa sổ bật lên đã sai. Nhưng còn có các yếu tố khác: tỷ lệ thoát và tác động của cửa sổ bật lên đối với Kinh nghiệm người dùng. Cái này thì sao?
2. Cửa sổ bật lên ảnh hưởng đến trải nghiệm người dùng và tỷ lệ thoát như thế nào?
Một trong những suy nghĩ đầu tiên khi nhắc đến pop-up là số lượng thất bại ngày càng tăng, bởi vì ngày càng có nhiều người rời khỏi trang đích do lỗi của cửa sổ bật lên, điều này hoàn toàn hợp lý. Tuy nhiên, hãy nhớ các ví dụ trên: Các nhà tiếp thị mới bắt đầu sử dụng WP không thấy sự do dự chỉ số này, cũng như Backlinko - số lần thất bại không thay đổi trong cả hai trường hợp.
Dan Zarrella cũng đi đến kết luận tương tự sau khi thực hiện một loạt bài kiểm tra cá nhân. trang đích, nhận thấy rằng sự hiện diện của cửa sổ bật lên không ảnh hưởng đến tỷ lệ thoát. Điều duy nhất đã thay đổi là khi loại bỏ cửa sổ bật lên, Dan đã mất 50% khách hàng tiềm năng.
3. Trải nghiệm người dùng thì sao?
Có vẻ như du khách không quan tâm. Các nhà tiếp thị mới bắt đầu sử dụng WP chưa nhận được một lời phàn nàn nào về cửa sổ bật lên từ khách hàng của họ.
Nếu bạn nghĩ về nó, điều này có ý nghĩa. Đúng, thật khó chịu khi thấy những thứ như thế này sau khi truy cập một tài nguyên bằng liên kết từ Facebook:
Nhưng đây không phải là lý do để rời khỏi trang web trong sự tức giận. Bạn thường làm gì trong những trường hợp như vậy? Đúng vậy - hãy đóng cửa sổ bật lên và tiếp tục tìm kiếm nội dung mong muốn.
Hơn nữa, việc sử dụng cửa sổ bật lên đúng cách có thể cải thiện trải nghiệm người dùng, theo gương dịch vụ Vero. Nếu bạn dừng lại trang chủ và bạn không thực hiện bất kỳ hành động nào trong vòng 30 giây, bạn sẽ thấy một cửa sổ ở góc có dòng chữ: “Điều gì đang ngăn bạn đăng ký Vero ngay bây giờ?”
4. Làm thế nào để phá hủy khả năng sử dụng của cửa sổ bật lên?
Tuy nhiên, bạn không thể nhúng bất kỳ quảng cáo bật lên nào vào trang đích của mình và hy vọng chuyển đổi cao. Nếu một cửa sổ bật lên không nổi bật trên trang thì ít nhất nó cũng vô dụng.
Bạn chuẩn bị rời khỏi trang đích và sau đó... Bam! Có điều gì đó kỳ lạ đã xảy ra, nút CTA xuất hiện ở đâu giữa trang? Trên thực tế, cửa sổ bật lên này được đặt chồng lên một trang không bị tối, hòa vào nền. Khi bạn không tách cửa sổ bật lên khỏi phần còn lại của trang, điều đó thực sự làm hỏng trải nghiệm người dùng.
Hóa ra, nhiều nhà tiếp thị đã sai lầm về cửa sổ bật lên—hóa ra chúng vẫn hoạt động. Bây giờ bạn sẽ tìm hiểu cách sử dụng cửa sổ bật lên trên trang đích của mình để đạt được hiệu quả tối đa.
5. Tạo cửa sổ bật lên hiệu quả
Trước khi bắt đầu tạo cửa sổ bật lên, hãy xem các loại chính của chúng. Có hai loại cửa sổ bật lên chính:
Lớp phủ
Chúng trông giống như ví dụ trên. Những cửa sổ như vậy che khuất toàn bộ màn hình, làm tối nền. Cửa sổ bật lên vẫn là thành phần duy nhất trên trang được người dùng hiển thị rõ ràng - trong Gần đâyĐã có xu hướng sử dụng các cửa sổ bật lên ở định dạng cụ thể này.
Nhà tiếp thị nổi tiếng Dan Zarella cũng sử dụng lớp phủ làm tối nền, nhưng bản thân cửa sổ nhỏ hơn nhiều so với bình thường:
Windows bật lên khi cuộn trang
Loại cửa sổ bật lên này xuất hiện khi người dùng cuộn đến một giai đoạn nhất định trên trang - thường xuyên nhất định dạng nàyđược sử dụng trong blog và nó cực kỳ hiệu quả. Sau khi cuộn nửa trang, bạn sẽ thấy một cái gì đó như thế này:
Tùy thuộc vào phần mềm hoặc plugin bạn sử dụng, bạn có thể thử nghiệm độ sâu cuộn—người dùng cần đi bao xa để xem cửa sổ bật lên. Ngoài ra, bạn có thể đặt giao diện của cửa sổ bật lên dựa trên thời gian người dùng dành cho trang web.
Các yêu cầu tương tự áp dụng cho tiêu đề, văn bản trường và nút trên cửa sổ bật lên cũng như nội dung trên CTA. Xét cho cùng, cửa sổ bật lên là thành phần của lời kêu gọi hành động, mục đích của nó là tăng lượt xem/người đăng ký/khách hàng tiềm năng.
6. Thời điểm tốt nhấtđể hiển thị cửa sổ bật lên
Nếu chúng ta nói về việc thử nghiệm lớp phủ thì dịch vụ SumoMe đã thu thập dữ liệu sau: cho đến nay thời gian tối ưu là 5 giây sau khi khách truy cập tới trang đích.
WhichTestWon đưa ra số liệu thống kê khác nhau. Trong quá trình thử nghiệm, sự xuất hiện của lớp phủ được kiểm tra ở 15, 30 và 45 giây sau khi người dùng hạ cánh và kết quả tối ưu được hiển thị ở tùy chọn đầu tiên: sự xuất hiện của cửa sổ sau 15 giây bằng 11% lựa chọn hiệu quả hơn với 30 giây và ở mức 50% - tùy chọn với 45 giây sau khi hạ cánh.
Nhưng hãy nhớ - không có thời điểm lý tưởng để cửa sổ xuất hiện, vì các xét nghiệm là cần thiết trong từng trường hợp cụ thể. Điều này cũng đúng với câu hỏi về tần suất xuất hiện của cửa sổ bật lên. Nói một cách đơn giản, số liệu thống kê từ nguồn của người khác có thể thúc đẩy bạn thực hiện thử nghiệm của riêng mình, nhưng không nên trở thành đối tượng để bắt chước - thử nghiệm.
Làm thế nào để tạo một cửa sổ bật lên là câu hỏi ám ảnh tâm trí của bất kỳ lập trình viên trẻ mới làm quen nào. Và hôm nay chúng ta sẽ xem cách tạo cửa sổ bật lên này. Tôi sẽ đi trước bản thân một chút, bởi vì những gì chúng tôi sẽ làm sẽ thực sự rất, rất thú vị và hữu ích.
Vì vậy, chúng tôi sẽ tạo một cửa sổ tương tự mà tôi đã triển khai trên trang web của một trong những khách hàng của mình. Bạn có thể xem qua. Lợi thế rất lớn phương pháp này việc tạo một cửa sổ như vậy có nghĩa là chúng tôi sẽ không sử dụng JavaScript mà sẽ chỉ giới hạn ở CSS3 và HTML5 yêu thích của tôi. Bằng cách này, chúng ta sẽ giết được nhiều con chim bằng một hòn đá. Thứ nhất, chúng tôi sẽ làm cho việc tải trang web của mình trở nên dễ dàng hơn và thứ hai, chúng tôi sẽ triển khai mọi thứ một cách thuận tiện và dễ dàng với sử dụng tối thiểu mã này sẽ cho phép bạn cung cấp độc lập cho cửa sổ bật lên của mình bất kỳ kích thước, màu sắc, hình dạng nào. Tôi nghĩ nó thật tuyệt. Vậy hãy bắt đầu.
Hãy tưởng tượng, bạn đã có một trang web và bạn muốn triển khai một nút ở đâu đó, chẳng hạn như “đăng ký” hoặc “ ứng dụng trực tuyến" Và bạn muốn người dùng nhấp vào nút này sẽ thấy một cửa sổ nhỏ cho phép anh ta nhập một số dữ liệu vào đó rồi gửi cho quản trị viên trang. Đây là cửa sổ chúng ta sẽ làm bây giờ.
Để bắt đầu, chúng ta sẽ tạo nút này, tôi nghĩ bạn có thể làm điều đó mà không gặp nhiều khó khăn. Nhưng trong thẻ Bạn phải nhập #openModal sau . Đây là những gì nó sẽ trông giống như bạn. Tiếp theo, trước thẻ đóng viết mã dưới đây. Xin lưu ý rằng chúng ta sẽ sử dụng các lớp để trang trí và id để gọi cửa sổ. Tuân theo quy tắc này, chúng ta có thể tạo ra vô số cửa sổ bật lên khác nhau.
X Cửa sổ bật lên
Cửa sổ này được tạo ra bởi một trong những người những cách đơn giản. Không có gì cá nhân, mọi thứ đều đơn giản :)
Bây giờ chúng ta cần thiết kế mọi thứ thật đẹp và đảm bảo mọi thứ hoạt động như bình thường. Hãy bắt đầu trang trí.
Thiết kế nội thấtModalDialog (vị trí: cố định; họ phông chữ: Arial, Helvetica, sans-serif; trên cùng: 0; phải: 0; dưới cùng: 0; trái: 0; nền: rgba(0,0,0,0.8); z-index : 99999; -webkit-transition: độ mờ 400ms dễ dàng hiển thị; -moz-transition: độ mờ 400ms hiển thị dễ dàng;
Hộp thoại Phương thức( vị trí: cố định; Họ phông chữ: Arial, Helvetica, sans-serif; trên cùng: 0; đúng : 0 ; đáy: 0; trái: 0; nền: rgba(0, 0, 0, 0,8); chỉ số z: 99999; Webkit - transition : độ mờ 400ms dễ dàng tham gia ; Moz - transition : độ mờ 400ms dễ dàng vào ; chuyển đổi: độ mờ 400ms dễ dàng - in; không trưng bày; con trỏ - sự kiện : không có ; |
Đoạn mã trên đơn giản như địa ngục. Nhưng để đề phòng, vì tôi biết blog của mình được khá nhiều người mới đọc nên tôi sẽ phân tích những khó khăn có thể xảy ra. Để cửa sổ luôn ở một nơi, tôi đã đặt nó ở một vị trí cố định. Ngoài ra, để cửa sổ trải dài trên toàn bộ màn hình, tôi đặt tọa độ các góc thành điểm 0. Đối với lý lịch màu được đặt thành màu đen và độ trong suốt được thêm vào, do đó đạt được độ tối xung quanh cửa sổ phương thức. Để đảm bảo rằng cửa sổ nằm trên các thành phần còn lại của trang, hãy đặt nó ở chế độ lớn chỉ số z. Vì vẻ ngoài mịn màng và sự biến mất của cửa sổ phương thức yêu thích của chúng ta, và nó sẽ trở nên như thế này, tin tôi đi, chuyển tiếp. Để ẩn cửa sổ bạn cần đặt trưng bày V. không có. Tài sản sự kiện con trỏ cho phép bạn kiểm soát tính tương tác (khả năng nhấp chuột) của các phần tử.
Mở một cửa sổ bật lênChúng tôi trang trí cửa sổ của chúng tôi. Nhưng! Bạn nói với tôi rằng nó không hoạt động. Vâng, tôi trả lời là như vậy. Bởi vì bây giờ là phần thú vị nhất. CSS3 đã giới thiệu một lớp giả mục tiêu, một điều thực sự hữu ích, bất kể bạn nói gì. Và trong cửa sổ bật lên theo phương thức của chúng tôi, hoàn toàn không có cách nào nếu không có nó. Nó làm gì? Lớp giả này, nếu được chỉ định với một số phần tử được xác định trong thanh địa chỉ là id, trong trường hợp của chúng tôi là #openModal. Khi đó, các thuộc tính của lớp giả này sẽ trở nên quan trọng hơn các thuộc tính của phần tử đích. Tôi nghĩ bạn đã hiểu những gì tôi muốn làm.
ModalDialog:target ( display: block; con trỏ-sự kiện: auto; ) .modalDialog > div ( width: 400px; vị trí: tương đối; lề: 10% tự động; phần đệm: 5px 20px 13px 20px; bán kính đường viền: 10px; nền: # fff; nền: -moz-tuyến tính-gradient(#fff, #999); nền: -webkit-tuyến tính-gradient(#fff, #999); )
ModalDialog: mục tiêu( hiển thị: khối; sự kiện con trỏ: tự động; ModalDialog > div ( chiều rộng: 400px; vị trí: tương đối; ký quỹ: 10% tự động; phần đệm: 5px 20px 13px 20px; bán kính đường viền : 10px ; nền : #fff; nền : - moz - tuyến tính - gradient (#fff, #999); nền: - webkit - tuyến tính - gradient (#fff, #999); nền : - o - tuyến tính - gradient (#fff, #999); |
Lớp giả mục tiêuđặt HIỂN THỊ thành BLOCK và do đó cửa sổ bật lên. Thuộc tính POINTER-EVENTS kiểm soát hoạt động của liên kết.
Thuộc tính DIV đặt chiều rộng của cửa sổ, vị trí của nó trên màn hình và khoảng đệm để đặt cửa sổ ở giữa trang. Các thuộc tính còn lại thiết lập lề bên trong trang, làm tròn các góc và nền của cửa sổ với độ chuyển màu từ trắng đến xám đậm.
Khi thiết kế cửa sổ được thiết lập và nó mở ra, bạn cần tạo một nút để đóng cửa sổ - thiết kế và triển khai chức năng. Sử dụng CSS3 và HTML5 cho phép bạn tạo các nút tùy chỉnh đầy phong cách mà không cần sử dụng hình ảnh:
Đóng ( nền: #606061; màu: #FFFFFF; chiều cao dòng: 25px; vị trí: tuyệt đối; phải: -12px; căn chỉnh văn bản: giữa; trên cùng: -10px; chiều rộng: 24px; trang trí văn bản: không có; phông chữ- trọng lượng: đậm; -webkit-border-radius: 12px; -moz-border-radius: 12px; -moz-box-shadow: 1px 3px #000; :hover ( nền: #00d9ff; )
Đóng ( nền: #606061; |
