Hướng dẫn tạo cửa sổ Popup với CSS, JavaScript và jQuery

NỘI DUNG

Khái niệm về cửa sổ Poup

Cửa sổ Popup (hay còn gọi là cửa sổ bật lên) là một loại cửa sổ nhỏ bật lên trên trình duyệt web khi người dùng thực hiện một hành động nhất định, chẳng hạn như nhấp chuột vào một liên kết, hoặc khi tải trang web. Cửa sổ Popup thường chứa các thông tin quảng cáo, thông tin bổ sung hoặc các hộp thoại cần phải điền thông tin trước khi tiếp tục thực hiện một hành động nào đó trên trang web.

Tuy nhiên, các cửa sổ Popup cũng có thể được sử dụng để phát tán mã độc, spam hoặc lừa đảo người dùng. Vì vậy, nhiều trình duyệt web đã bắt đầu chặn cửa sổ Popup hoặc cho phép người dùng tự quyết định xem một cửa sổ Popup cụ thể có nên bật hay không.

Trong lĩnh vực lập trình web, các nhà phát triển cũng có thể sử dụng JavaScript để tạo ra các cửa sổ Popup trên trang web của mình để cung cấp thông tin cho người dùng hoặc hiển thị quảng cáo.

Bật cửa sổ Popup trên website

Để bật cửa sổ popup trên một trang web, bạn có thể sử dụng JavaScript để thêm một sự kiện click vào một liên kết hoặc nút. Khi người dùng nhấp vào liên kết hoặc nút đó, cửa sổ popup sẽ xuất hiện.

Ví dụ, để tạo một cửa sổ popup khi người dùng nhấp vào một nút, bạn có thể sử dụng mã sau:

<!DOCTYPE html>
<html>
<head>
	<title>Popup Window Example</title>
	<script>
		function openPopupWindow() {
			window.open("https://example.com", "popupWindow", "width=500,height=500");
		}
	</script>
</head>
<body>
	<button onclick="openPopupWindow()">Open Popup Window</button>
</body>
</html>

Popup với CSS và javaScript

Để tạo cửa sổ Popup với CSS và JavaScript, bạn có thể sử dụng các thuộc tính CSS để thiết lập kiểu cho cửa sổ Popup và sử dụng JavaScript để thêm sự kiện để mở và đóng cửa sổ Popup.

Dưới đây là một ví dụ:

<!DOCTYPE html>
<html>
<head>
	<title>Popup Window Example</title>
	<style>
		.popup-wrapper {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 999;
		}
		
		.popup {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 400px;
			height: 200px;
			background-color: #fff;
			border-radius: 10px;
			padding: 20px;
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
			z-index: 1000;
		}
		
		.close {
			position: absolute;
			top: 10px;
			right: 10px;
			cursor: pointer;
		}
	</style>
	<script>
		function openPopup() {
			document.getElementById("popup-wrapper").style.display = "block";
		}
		
		function closePopup() {
			document.getElementById("popup-wrapper").style.display = "none";
		}
	</script>
</head>
<body>
	<a href="#" onclick="openPopup()">Open Popup Window</a>
	<div class="popup-wrapper" id="popup-wrapper">
		<div class="popup">
			<span class="close" onclick="closePopup()">&times;</span>
			<p>This is a popup window.</p>
		</div>
	</div>
</body>
</html>

Trong ví dụ này, chúng ta đã tạo một cửa sổ Popup đơn giản bằng CSS. Cửa sổ Popup được đóng gói trong một div với lớp “popup-wrapper”, và có một div con với lớp “popup” để hiển thị nội dung cửa sổ Popup. Cửa sổ Popup có một nút đóng với lớp “close” để đóng cửa sổ Popup.

Sau đó, chúng ta đã sử dụng JavaScript để thêm sự kiện click vào liên kết “Open Popup Window” và nút đóng cửa sổ Popup. Khi người dùng nhấp vào liên kết “Open Popup Window”, chúng ta sẽ gọi hàm openPopup() để hiển thị cửa sổ Popup bằng cách đặt thuộc tính display của div có lớp “popup-wrapper” thành “block”. Khi người dùng nhấp vào nút đóng, chúng ta sẽ gọi hàm closePopup() để đóng cửa sổ Popup.

Popup với CSS và jQuery

Để tạo cửa sổ Popup với CSS và jQuery, bạn có thể sử dụng các thuộc tính CSS để thiết lập kiểu cho cửa sổ Popup và sử dụng jQuery để thêm sự kiện để mở và đóng cửa sổ Popup.

Đầu tiên, hãy tạo một HTML đơn giản với một liên kết để mở cửa sổ Popup:

<!DOCTYPE html>
<html>
<head>
	<title>Popup Window Example</title>
	<style>
		.popup-wrapper {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 999;
		}
		
		.popup {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 400px;
			height: 200px;
			background-color: #fff;
			border-radius: 10px;
			padding: 20px;
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
			z-index: 1000;
		}
		
		.close {
			position: absolute;
			top: 10px;
			right: 10px;
			cursor: pointer;
		}
	</style>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
		$(document).ready(function() {
			$("#open-popup").click(function() {
				$(".popup-wrapper").fadeIn();
			});
			
			$(".close, .popup-wrapper").click(function() {
				$(".popup-wrapper").fadeOut();
			});
		});
	</script>
</head>
<body>
	<a href="#" id="open-popup">Open Popup Window</a>
	<div class="popup-wrapper">
		<div class="popup">
			<span class="close">&times;</span>
			<p>This is a popup window.</p>
		</div>
	</div>
</body>
</html>

Sau đó, chúng ta đã sử dụng jQuery để thêm sự kiện click vào liên kết “Open Popup Window” và nút đóng cửa sổ Popup. Khi người dùng nhấp vào liên kết “Open Popup Window”, chúng ta sẽ sử dụng phương thức fadeIn() của jQuery để hiển thị cửa sổ Popup. Khi người dùng nhấp vào nút đóng hoặc bất kỳ vị trí nào bên ngoài cửa sổ Popup.

Kết luận

Việc sử dụng cửa sổ Popup trên website có thể mang lại nhiều lợi ích cho trải nghiệm người dùng, nhưng cũng cần được sử dụng một cách cẩn thận và có tính đúng đắn.

Một số lợi ích của cửa sổ Popup bao gồm:

Có thể thu hút sự chú ý của người dùng và giúp quảng bá thông tin hoặc sản phẩm.
Có thể tạo ra các chương trình quảng cáo hoặc khuyến mãi đặc biệt.
Có thể yêu cầu người dùng đăng nhập hoặc đăng ký tài khoản.
Có thể hiển thị các thông báo quan trọng cho người dùng.

Tuy nhiên, việc sử dụng cửa sổ Popup cũng có thể gây phiền toái cho người dùng và ảnh hưởng đến trải nghiệm của họ trên website. Một số vấn đề mà người sử dụng có thể gặp phải bao gồm:

Cửa sổ Popup có thể làm chậm tốc độ tải trang và ảnh hưởng đến thời gian phản hồi của trang web.
Cửa sổ Popup có thể gây khó chịu hoặc làm người dùng không muốn truy cập vào trang web của bạn.
Cửa sổ Popup có thể bị chặn bởi phần mềm chặn quảng cáo hoặc các công cụ chặn cửa sổ Popup.
Cửa sổ Popup có thể ảnh hưởng đến SEO của trang web nếu được sử dụng sai cách.

Vì vậy, khi sử dụng cửa sổ Popup, chúng ta cần cân nhắc và sử dụng một cách hợp lý để đảm bảo rằng nó mang lại giá trị cho người dùng và không làm giảm trải nghiệm của họ trên trang web của bạn./.

HTML, CSS, JavaScript, jQuery