Trong bài viết sẽ hướng dẫn bạn Tạo popup đơn giản bằng Javascript, bạn cũng có thể sử dụng trong tệp HTML (Code tạo popup ads html), bạn chỉ cần copy và sử dụng. Việc của bạn là thay đổi giá trị gốc của mình như: Hình ảnh, URL popup mà bạn muốn hiển thị.
Trong thế giới của lập trình web, việc tạo ra các quảng cáo Popup Ads là một trong những công việc được yêu cầu nhiều nhất. Tuy nhiên, đôi khi đây cũng là một trong những nhiệm vụ đáng chán khi phải tìm kiếm và cài đặt các plugin hoặc thư viện của bên thứ ba, hoặc phải trả tiền cho các công cụ hỗ trợ.
Vì vậy, hôm nay, mình sẽ chia sẻ với bạn một vài đoạn code đơn giản để tạo Popup theo ý muốn. Mã nguồn này được viết bằng ngôn ngữ JavaScript với sự hỗ trợ của thư viện jQuery, giúp bạn dễ dàng tùy chỉnh và tạo Popup theo nhu cầu của mình.
Để sử dụng mã nguồn này, bạn chỉ cần sao chép và dán mã vào trang web của mình, sau đó thay đổi nội dung, hình ảnh và các thông số khác để phù hợp với nhu cầu của bạn. Với những ai không có kinh nghiệm về lập trình, mã nguồn này cũng rất dễ hiểu và chỉnh sửa.
Code Tạo Popup Ads
Tạo quảng cáo popup chỉ hiển thị khi người dùng click chuột đầu tiên, và không hiển thị trong các lần click chuột tiếp theo, cho đến khi người dùng tải lại trang, có nghĩa là khi người dùng tải lại trang, điều này sẽ lặp lại.
<script>
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) return parts.pop().split(";").shift();
}
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function showPopup() {
var popupShown = getCookie("popupShown");
if (!popupShown) {
var popup = window.open("URL POPUP CỦA BẠN", "popup", "width=500,height=500");
// Thiết lập cookie sau khi popup được đóng lại
popup.onbeforeunload = function() {
setCookie("popupShown", "true", 1);
}
}
// Ngăn người dùng click chuột tiếp theo trong các lần tải trang tiếp theo
document.removeEventListener("click", showPopup);
}
// Thiết lập sự kiện click cho tài liệu
document.addEventListener("click", showPopup);
</script>
♦ Thay thế URL POPUP CỦA BẠN bằng link popup của bạn nhé!
♦ Ví dụ: var popup = window.open(“//dukingdraon.com/4/4236246”, “popup”, “width=500,height=500”);
Ngoài thay thế URL, bạn cũng có thể thay thế 2 thông số width và height là chiều dài và chiều rộng của popup bật lên.
Trong đoạn mã này, chúng ta sử dụng ba hàm: getCookie, setCookie và showPopup.
- Hàm getCookie trả về giá trị của cookie có tên được chỉ định, nếu cookie đã được tạo trước đó.
- Hàm setCookie thiết lập giá trị của cookie với tên và giá trị được chỉ định, và thiết lập thời gian sống của cookie.
- Hàm showPopup được sử dụng để hiển thị popup và ngăn người dùng click chuột tiếp theo trong các lần tải trang tiếp theo.
Chúng ta sử dụng biến popupShown để kiểm tra xem cookie đã được tạo hay chưa. Nếu cookie chưa được tạo, chúng ta mở popup và thiết lập cookie sau khi popup có thể đóng lại. Nếu cookie đã được tạo, popup sẽ không được mở lại, cho đến khi có lần tải trang tiếp theo.
Ngoài ra, bạn cũng cần đặt đường dẫn của popup vào trong hàm window.open, và thay đổi các giá trị trong hàm setCookie để phù hợp với nhu cầu của bạn, bao gồm tên cookie, giá trị cookie và thời gian sống của cookie.
Tạo Popup chỉ hiển thị trên các thiết bị Desktop, không hiển thị trên Mobile.
Để phù hợp hơn với nhu cầu, có thể nhiều bạn sẽ cần giảm sự khó chịu cho người dùng khi truy cập vào website của bạn bằng thiết bị di động. Với đoạn code trên popup sẽ hiển thị lên bên góc với kích thước 500×500, nên các thiết bị có màn hình lớn, sẽ ít bị khó chịu hơn, vì nó không chiếm quá nhiều không gian. Nhưng trên điện thoại thì nó sẽ là một tab mới hoàn toàn, điều này gây khó chịu cho người dùng.
Ví dụ hiển thị trên PC, POPUP này có thể tắt được nhé!
<script>
function isDesktop() {
// Kiểm tra kích thước màn hình để xác định thiết bị là desktop hay mobile
return window.matchMedia("(min-width: 1024px)").matches;
}
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) return parts.pop().split(";").shift();
}
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function showPopup() {
if (isDesktop()) {
var popupShown = getCookie("popupShown");
if (!popupShown) {
var popup = window.open("URL CỦA BẠN", "popup", "width=500,height=500");
// Thiết lập cookie sau khi popup được đóng lại
popup.onbeforeunload = function() {
setCookie("popupShown", "true", 1);
}
}
// Ngăn người dùng click chuột tiếp theo trong các lần tải trang tiếp theo
document.removeEventListener("click", showPopup);
}
}
// Thiết lập sự kiện click cho tài liệu
document.addEventListener("click", showPopup);
</script>
Hàm isDesktop được sử dụng để kiểm tra xem thiết bị là desktop hay mobile bằng cách kiểm tra kích thước màn hình. Nếu kích thước màn hình lớn hơn hoặc bằng 1024px, thiết bị được xác định là desktop. Nếu thiết bị là mobile, popup sẽ không được mở.
Đoạn code này cũng với chức năng tương tự như đoạn code trên là tạo popup, nhưng giới hạn lại là Chỉ Hiện Thị Trên Destop
Nếu muốn Popup chỉ bật lên trong cái click chuột thứ 2. ( Có nghĩa rằng, Popup chỉ hiển thị tại click chuột thứ 2)
⇒ Bằng cách thay đổi các giá trị trong hàm showPopup
function showPopup() {
if (isDesktop()) {
// Thêm biến countClick để đếm số lần click chuột
var countClick = getCookie("countClick");
if (!countClick) {
countClick = 0;
}
countClick++;
setCookie("countClick", countClick, 1);
if (countClick >= 2) {
var popupShown = getCookie("popupShown");
if (!popupShown) {
var popup = window.open("URL CỦA BẠN", "popup", "width=500,height=500");
// Thiết lập cookie sau khi popup được đóng lại
popup.onbeforeunload = function() {
setCookie("popupShown", "true", 1);
}
}
// Ngăn người dùng click chuột tiếp theo trong các lần tải trang tiếp theo
document.removeEventListener("click", showPopup);
}
}
}
Trong đoạn mã này, chúng ta sử dụng biến countClick để đếm số lần click chuột. Chúng ta lấy giá trị của countClick từ cookie. Nếu cookie chưa được tạo, chúng ta đặt giá trị ban đầu của countClick là 0.
Sau mỗi lần click chuột, chúng ta tăng giá trị của countClick lên 1 và lưu lại giá trị mới của countClick vào cookie. Nếu countClick đạt giá trị 2 hoặc hơn, chúng ta kiểm tra xem popup đã được hiển thị hay chưa. Nếu popup chưa được hiển thị, chúng ta mở popup và thiết lập cookie sau khi popup được đóng lại.
Nếu countClick chưa đạt giá trị 2, chúng ta không làm gì cả và tiếp tục đợi người dùng click chuột. Để đặt lại số lần click chuột, bạn có thể xóa cookie countClick hoặc thiết lập giá trị của nó về 0.
Để hiển thị popup trong 2 lần click chuột đầu tiên, bạn có thể sửa hàm showPopup như sau: ( Có nghĩa rằng trong 2 click đầu tiên, đều hiển thị Popup)
function showPopup() {
if (isDesktop()) {
var popupShown = getCookie("popupShown");
var clickCount = getCookie("clickCount") || 0;
if (!popupShown && clickCount < 2) {
var popup = window.open("URL CỦA BẠN", "popup", "width=500,height=500");
popup.onbeforeunload = function() {
setCookie("popupShown", "true", 1);
}
clickCount++;
setCookie("clickCount", clickCount, 1);
}
if (clickCount >= 2) {
document.removeEventListener("click", showPopup);
}
}
}
Tạo Popup, để thay thế URL POPUP là một hình ảnh bất kì:
function showPopup() {
var popupShown = getCookie("popupShown");
if (!popupShown) {
var popup = window.open("", "popup", "width=500,height=500");
popup.document.write("<img src='path/to/image.jpg'>");
// Thiết lập cookie sau khi popup được đóng lại
popup.onbeforeunload = function() {
setCookie("popupShown", "true", 1);
}
}
// Ngăn người dùng click chuột tiếp theo trong các lần tải trang tiếp theo
document.removeEventListener("click", showPopup);
}
Tạo Popup, chúng ta sử dụng thẻ img để hiển thị hình ảnh trong popup. Đường dẫn đến hình ảnh được đặt trong thuộc tính src của thẻ img. Chúng ta cũng sử dụng phương thức document.write() để viết đoạn mã HTML vào popup. Đoạn mã HTML này bao gồm thẻ img để hiển thị hình ảnh.
Lưu ý rằng đường dẫn đến hình ảnh cần phải được thay thế bằng đường dẫn thực tế đến hình ảnh của bạn.
