Cách tạo cửa sổ bật lên. PopUp - cửa sổ bật lên. Tạo và sử dụng cửa sổ bật lên. Còn trải nghiệm người dùng thì sao?

Sự thật đã 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 vào trang sản phẩm của cửa hàng trực tuyến hoặc thậm chí không để lại khách hàng tiềm năng - nhưng phần lớn đó 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. Chắc chắn, Chúng ta đang nói về chủ yếu là 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 mua hàng miễn phí trị giá 10 euro cho một món đồ nhỏ - địa chỉ E-mail. Điều này đã được thực hiện bởi vì:

Mọi người đều thích quà tặng tiền mặt;

10 euro mỗi thường xuyên liên lạc qua email - giá nhỏ.

Theo ExactTarget, email là kênh tiếp thị được người tiêu dùng ưa thích nhất, với 77% người tiêu dùng chọn email thay vì 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ì?

Việc sử dụng cửa sổ bật lên trên các trang chính (không phải toàn bộ trang web) đã tăng số lượt đă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 đến trải 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 đã đ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. Thế còn Kinh nghiệm người dùng?

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 trường hợp tương tự? Đú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 ví dụ của dịch vụ Vero. Nếu bạn truy cập trang chính và 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 hộp ở góc có dòng chữ: “Điều gì đang ngăn cả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 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:

Cửa sổ lớn (lớp phủ).

Windows bật lên khi cuộn trang.

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. Ưu điểm rất lớn của phương pháp tạo cửa sổ như vậy 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ẽ giúp tải trang web của mình dễ dàng hơn và thứ hai, chúng tôi sẽ triển khai mọi thứ ở dạng thuận tiện và dễ dàng với việc sử dụng mã tối thiểu, điều 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 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ất

ModalDialog (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. Để có sự xuất hiện mượt mà và 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ư vậ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ên

Chú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ờ đến phần thú vị. 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ổ vào 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.

Đóng một cửa sổ phương thức

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;

Hộp 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.

Số đông trình duyệt hiện đạiđi kèm với cá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ên

Mộ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 hãy lưu ý 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ên

Sự kết hợp biểu ngữ quảng cáo 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 một quảng cáo có thể được phủ lên trên một 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.

PopDưới

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.

Công nghệ quảng cáo phổ biến

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 quảng cáo đó ra khỏi 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.

Trình tạo cửa sổ PopUP "khó tính"

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.

Chuyển hướng URL

Đô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ên

Là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ẽ giúp ích rất nhiều trong việc 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.

Nếu cập nhật không giúp ích

Đôi khi một cửa sổ PopUP cho một trang web và những thứ tương tự phần mềmđược nhúng quá sâu để có thể được gỡ bỏ bằng cách cập nhật. Trong những trường hợp như vậy, 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 các liên kết tải xuống tại trang chủ mỗi ứng dụng.

Hôm nay chúng ta sẽ nói về cách tạo cửa sổ bật lên của riêng bạn cho trang web của bạn. Hiện nay phương pháp này rất phổ biến, nhưng hầu hết các giải pháp để thực hiện nó đều phải trả phí. Một ví dụ về một cửa sổ không đẹp lắm (nhưng đây chỉ là ví dụ) bên trong một bài viết...

Trong bài đăng này, chúng ta sẽ tìm hiểu cách tạo một cửa sổ bật lên như thế này. Đơn giản, nhanh chóng, hiệu quả và quan trọng nhất là miễn phí!

Bất kỳ cửa sổ bật lên nào về cơ bản đều bao gồm hai phần. Đầu tiên là làm tối nền chung. Thứ hai là chính cửa sổ. Ngược lại, cửa sổ thường được chia thành tiêu đề, văn bản và biểu mẫu đăng ký. Hãy chuẩn bị phần đế cho cửa sổ của chúng ta, có tính đến cấu trúc đã chỉ định.

Chúng ta có:
fs_popup_bg — Làm mờ trang web;
fs_popup — Chính cửa sổ;
fs_popup_head - Tiêu đề cửa sổ;
fs_content - Nội dung của cửa sổ, được chia thành hai phần;

Bây giờ hãy viết các phong cách cần thiết...

#fs_popup_bg ( z-index:9999; left:0; top:0; vị trí:fixed; chiều rộng:100%; chiều cao:100%; nền:rgba(0,0,0,0.9); ) #fs_popup ( lề: 10% 20%; vị trí: 600px; đường viền: 5px liền khối #FF0000; phần đệm: 1px 10px 10px; fs_content_left, .fs_content_right ( float: left; buffer: 5px: font-size: 20px; font-family: Arial; )

Chúng ta hãy xem nhanh các kiểu cửa sổ bật lên của chúng tôi.
#fs_popup_bg- cho biết nền của chúng ta sẽ có màu đen và gần như mờ đục (0,9), sẽ nằm ở góc trên bên trái và chiếm toàn bộ diện tích của màn hình. Trong trường hợp này, độ sâu của phần tử, hay đúng hơn là độ cao của nó so với các phần tử khác, sẽ rất lớn (chắc chắn lớn hơn các phần tử khác).
#fs_popup- chỉ ra rằng cửa sổ sẽ ở trên nền một cấp (nếu không chúng ta sẽ không nhìn thấy nó). Kích thước của nó sẽ là 600px x 300px với góc tròn và một khung màu đỏ.
.fs_content_left, .fs_content_right- cho chúng ta biết rằng các khối được nhấn sang trái (cần thiết cho vị trí của chúng trên cùng cấp độ), chúng có thụt lề và phông chữ Arial.

Hãy điền vào cửa sổ của chúng tôi với nội dung:

Đóng Trong bài đăng này, chúng ta sẽ tìm hiểu cách tạo một cửa sổ bật lên như thế này. Đơn giản, nhanh chóng, hiệu quả và quan trọng nhất là miễn phí! Hãy nhanh tay nhập E-Mail của bạn và nhận ngay một loạt thông tin hữu ích!*

Email của bạn:
* - Trường này không hoạt động. Bằng cách nhấp vào nút "Đăng ký", bạn đồng ý với việc sử dụng địa chỉ của mình cho mục đích gửi thư hàng loạt tài liệu quảng cáo. Bạn cũng để lại di sản ô tô, căn hộ và 10% thu nhập của mình cho tác giả của trang web.

Và hãy thêm phong cách của chúng tôi để có màn hình đẹp hơn:

#fs_popup_bg ( z-index:9999999999998; left:0; top:0; vị trí:cố định; chiều rộng:100%; chiều cao:100%; nền:rgba(0,0,0,0.9); ) #fs_popup ( lề: 10% 20%; z-index:99999999999; chiều rộng:600px; đường viền: 5px rắn #FF0000; nền: 1px 10px 10px); fs_popup_head ( text-align: right; ) .fs_popup_head a ( color: #FFF; con trỏ: con trỏ ; trang trí văn bản: gạch dưới; ) .fs_popup_head a:hover ( con trỏ: con trỏ; trang trí văn bản: none; ) .fs_content_left, . fs_content_right ( float: left; đệm: 5px: cỡ chữ: 20px; họ phông chữ: Arial ; ) .fs_content_left ( width: 370px; color: #FFF; font-size: 17px; line-height: 17px; font-family : Arial; ) .fs_content_right ( width: 200px; color: #FFFF00; ) .fs_content_right nhỏ ( cỡ chữ: 7px; chiều cao dòng: 7px; ) .fs_content_right đầu vào ( lề: 5px; chiều rộng: 190px; màu: #000 ; ) .fs_ok ( đường viền: 1px cố định #FF0000; bán kính đường viền: 10px; chiều cao: 35px; nền: #FFFF00; con trỏ: con trỏ; màu: #000; )

Về cơ bản đó là tất cả. Như có thể thấy từ Ví dụ về JavaScriptđối với cửa sổ bật lên, về cơ bản nó cần thiết trong hai trường hợp:
1) Sự kiện đóng cửa sổ của chúng tôi;
2) Sự kiện click vào nút “Đăng ký”;
Sẽ không có hại gì nếu kiểm tra xem cửa sổ này có được hiển thị trên máy tính này. Làm việc với cookie khá phù hợp cho những mục đích này.

3. Ví dụ về cửa sổ phương thức jQuery được gọi từ một liên kết (từ Demo)

Rất có thể, bạn đã nhiều lần nhìn thấy một cửa sổ phương thức bật lên trên Internet - xác nhận đăng ký, cảnh báo, Tài liệu tham khảo, tải tập tin và nhiều hơn nữa. Trong hướng dẫn này, tôi sẽ đưa ra một số ví dụ về cách tạo các cửa sổ phương thức đơn giản nhất.

Tạo một cửa sổ phương thức bật lên đơn giản Hãy bắt đầu xem mã cho một cửa sổ phương thức đơn giản sẽ xuất hiện ngay lập tức
mã jQuery

$(document).ready(function()
{
Alert("Văn bản trong cửa sổ bật lên");
});

Dán mã vào bất cứ đâu trong nội dung trang của bạn. Ngay sau khi tải trang, không có bất kỳ lệnh nào, bạn sẽ thấy một cửa sổ trông như thế này:

Nhưng đoạn mã sau sẽ được thực thi sau khi toàn bộ trang được tải vào trình duyệt. Trong ví dụ của chúng tôi, sau khi tải trang có hình ảnh, một cửa sổ bật lên đơn giản sẽ bật lên:

$(window).load(function()
{
notification("Trang đã tải xong!)");
});

Gọi một phương thức cửa sổ jQuery bằng liên kết với CSS Bước tiếp theo là tạo một cửa sổ phương thức khi liên kết được nhấp vào. Nền sẽ tối dần.

Bạn thường có thể thấy rằng các biểu mẫu đăng nhập và đăng ký nằm trong các cửa sổ như vậy. Hãy bắt tay vào công việc

Đầu tiên hãy viết phần html. Chúng tôi đặt mã này vào phần nội dung tài liệu của bạn.

Gọi một cửa sổ phương thức

Văn bản cửa sổ phương thức
Đóng
Văn bản trong một cửa sổ phương thức.

Mã CSS. Hoặc trong tập tin css riêng biệt, hoặc trong đầu.

thân hình(
họ phông chữ: verdana;
cỡ chữ: 15px;
}
.link (màu:#fff; trang trí văn bản: không có)
.link:hover (màu:#fff; trang trí văn bản: gạch chân)
#mặt nạ (
vị trí: tuyệt đối;
trái:0;
đỉnh: 0;
chỉ số z:9000;
màu nền:#000;
không trưng bày;
}
#boxes.window (
vị trí: tuyệt đối;
trái:0;
trên cùng:0px;
-trên cùng: 40px;
chiều rộng: 440px;
chiều cao: 200px;
không trưng bày;
chỉ số z:9999;
phần đệm: 20px;
tràn: ẩn;
}
#hộp #hộp thoại (
chiều rộng: 375px;
chiều cao: 203px;
phần đệm: 10px;
màu nền:#ffffff;
}
.đứng đầu(
vị trí: tuyệt đối;
trái:0;
đỉnh: 0;
chiều rộng: 370px;
chiều cao:30px;
nền: #0085cc;
phần đệm: 8px 20px 6px 10px;
}
.đóng(
nổi:đúng;
}
.nội dung(
phần đệm trên cùng: 35px;
}

TRONG mã jQuery Hãy tập trung vào vị trí của cửa sổ phương thức và mặt nạ, trong trường hợp của chúng ta là nền tối dần.

Chú ý! Đừng quên đưa thư viện vào phần đầu của tài liệu!

Kết nối thư viện từ trang web Google. Vâng, chính mã jQuery.

mã jQuery

$(document).ready(function() (
$("a").click(function(e) (
e.preventDefault();
var id = $(this).attr("href");
var MaskHeight = $(document).height();
var MaskWidth = $(window).width();
$("#mask").css(("width":maskWidth,"height":maskHeight));
$("#mask").fadeIn(1000);
$("#mask").fadeTo("chậm",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("left", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(function (e) (
e.preventDefault();
$("#mask, .window").hide();
});
$("#mask").click(function () (
$(this).hide();
$(".window").ẩn();
});
});