8
2011
CSS PopUp – Hiện POPUP đẹp hơn, dễ dàng hơn…
Tác giả: 
Đầ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 
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:
<script type="text/javascript" src="path_to/csspopup.js"></script>
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:
<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>
2. HTML
<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 :
<body onload="popup('popUpDiv');">
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
Bài có liên quan
Bài viết liên quan
Hàm number_format bằng Javascript- Free Ajax và Javascript cho designer
- Sử dụng Padding và Margin trong thiết kế website
- AJAX thần chưởng: tầng 1 – tải dữ liệu từ một trang khác
Tác giả: Nguyễn Duy Nhân
Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn.
Hay quá! Thanks anh nhé! tối phải test thử mới được
Bài viết hay lắm đại ca. Phải test thử thôi, đang cần cái này.
mần chi cái giao diện giống anh thế cu
Chỉ em cách làm đánh số trang ở gần cuối đi anh. Của em thấy toàn là Older Post không à
Nhớ không nhầm đó là thằng Pageviews, dùng thằng này cũng kho chịu phết.
@Nhân: Thank anh vì bài viết.
đỉnh không cần chỉnh
Thank bạn nhiều nhé! Cách làm rất hay đấy! Giúp mình mở mang tầm mắt >:D<
Plugin phân trang có trong thư viện plugin của WordPress đó em.
Cái này đẹp và hay đấy, cảm ơn bác đã cho anh em biết thêm 1 thủ thuật.
Mặc dù em không thích các trang web đặt Popup lắm nhưng biết thêm 1 thủ thuật cũng rất tốt.
À bác Nhân ơi! Em muốn cái plugin Top Comments hiển thị theo chiều ngang thì phải sửa thế nào, bác sửa giúp em được không? Em hỏi thằng Google rồi, toàn links die thôi bác ạ
Bác giúp em với nhé. Thanks bác trước >:D<
Cái này mình nghịch luôn trong plugin
Ngày mai mình sẽ có bài viết cho bác. Đón đọc nhé
Cảm ơn bác, Em đang chờ đợi bài viết của bác đây =D>
Nhiều lúc ghen tỵ với anh Nhân lắm ấy! Vbb cũng giỏi PHPBB thì càng ít đối WP chẳng thua ai :( Giỏi vừa thôi chứ anh
Em lại đang trêu anh đấy ah
Anh được cái biết nhiều thứ nhưng chả có thứ nào tới nơi tới chốn cả. Hi hi
Anh Nhân đã sài theme NewsWire bao giờ chưa? Em sử dụng trên hostgator không lấy được thumb :( yotourist.com không hiện nhưng nếu cài trên host khác hoặc local host thì được, không biết khắc phục sao :(
Chưa
Anh không có số lượng lớn các site WordPress để có thể thử hết tất cả các theme trên Internet
Bác cho em hỏi có theme giống của http://www.khongngungbuoctoi.com không ạ. em xem ví dụ rồi vào trang web thấy đẹp wa.
Em xin cảm ơn.
Email em là Lamborghinipth@gmail.com
Là nó đó
Em có thể xin cái theme http://www.khongngungbuoctoi.com/ được không hả bác?
Cái đó làm bằng Joomla chứ không phải WP và cái đó được thiết kế cho Johny Walker. Làm sao mà có được
hay quá pro.
mình cũng tạo được rồi, các bạn nghé trang kết quả xổ số của mình coi thử nha.
http://ketqua.org
thanks bác Nhanweb.
CẢm ơn bạn mình đã làm được
ngồi vật lộn mãi mà chả hiện được :( . Anh Nhân còn cách nào khác k a ?
không down được javascrip bạn ơi!!!!!!
body là dán chỗ nào bạn?
không làm đc bro ơi
sao mình ko down đc file popup js