Đầu tiên cho phép NhanWeb xin lỗi mọi người vì ngày hôm qua đến tận sáng nay mọi người đã phải chịu cảnh popup đập vào mặt liên tục khi di chuyển trang trang trong NhanWeb mà không có cách nào thoát ra được. Mọi người thông cảm nhé, chả là NhanWeb đang chạy 1 event hỗ trợ website khách hàng đăng ký thành viên tham gia trúng thưởng chuyến đi Seoul (mọi người nên đăng ký cho vui) và có test popup để có thể triển khai đến người dùng dễ dàng hơn. Do đó gây ra sự phiền toái cho mọi người. Hiện mọi chuyện đã tốt đẹp.
CSS Popup là đoạn code dùng hiển thị POPUP lên website mà có thể vượt qua được rào chặn POPUP của trình duyệt do nó hiển thị trên cùng 1 trang chứ không hiển thị trên trang mới. Trước khi đọc bài viết này NhanWeb biết rằng ít nhất bạn phải 1 lần đóng POPUP đăng ký tham gia trên NhanWeb. Đó chỉnh là CSS PopUp mà NhanWeb sẽ nói với bạn. Điểm cải tiến ở đây so với 1 số PopUp khác đó là CSS PopUp của NhanWeb chỉ hiện 1 lần duy nhất cho 1 phiên online. Nghĩa là bạn không bao giờ gặp lại nó nữa nên sẽ không phiền hà gì đến bạn…. trừ khi bạn clear cookie :D
Làm CSS PopUP
Đầu tiên, các bạn download đoạn javascript CSSPopUp này về (nhấp chuột phải, save target as…).
Chèn đoạn code sau vào header:
[code] <script type="text/javascript" src="path_to/csspopup.js"></script>[/code]
Việc tiếp theo, chúng ta cần thiết kế cái popup của mình. Đây là đoạn code NhanWeb đang dùng cho cái Popup của mình, bao gồm:
1. CSS:
[css]
<style>
#blanket {
background-color:#111;
opacity: 0.65;
position:absolute;
z-index: 9001;
width:100%;
}
#popUpDiv {
position:absolute;
background-color:#eeeeee;
width:520px;
height:1300px;
z-index: 9002;
}
</style>
[/css]
2. HTML
[code]
<div id="blanket" style="display: none;"></div>
<div id="popUpDiv" style="display: none;">
<a href="#" onclick="popup(‘popUpDiv’)">Click Me To Close</a>
<iframe scrolling="no" title="Không Ngừng Bước Tới – Club Journey – Không Ngừng Vươn Xa – Đến Seoul xem Maroon 5" src="http://www.khongngungbuoctoi.com/register_for_embed.php?chanel=Ping4" width="520" height="1300" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
Đoạn HTML này NhanWeb đặt ở body (chỗ nào trong body cũng được, không quan trọng), còn đoạn CSS ở trên NhanWeb quyết định đặt nó vào Header.
Ở thẻ body, để nó tự gọi cái PopUp mỗi khi mở trang, NhanWeb thêm vào :
[code] <body onload="popup(‘popUpDiv’);">[/code]
Nếu bạn thích sử dụng cho các liên kết thì bạn sử dụng thuộc tính onlick=”popup(‘popUpDiv’);” nhé :)
Chỉ đơn giản vậy thôi chúng ta sẽ có 1 PopUp đỉnh không cần chỉnh.
Demo là NhanWeb vào thời điểm hiện tại :)