CSS PopUp – Hiện POPUP đẹp hơn, dễ dàng hơn…

Đầ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:

<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 :)

About 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.

Comments

  1. Hay quá! Thanks anh nhé! tối phải test thử mới được ;):x

  2. Thuan Soldier says:

    Bài viết hay lắm đại ca. Phải test thử thôi, đang cần cái này.

  3. đỉnh không cần chỉnh ;))

  4. Kiếm tiền trên mạng says:

    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<

  5. 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.

  6. À 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 ạ :hic:
    Bác giúp em với nhé. Thanks bác trước >:D<

  7. Blog Nha Dat says:

    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 :D

    • Em lại đang trêu anh đấy ah =P~
      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 :ok:

      • Blog Nha Dat says:

        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 :(

  8. 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

  9. Em có thể xin cái theme http://www.khongngungbuoctoi.com/ được không hả bác?

  10. 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.

  11. CẢm ơn bạn mình đã làm được

  12. 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 ?

  13. không down được javascrip bạn ơi!!!!!!

  14. ivnshare.com says:

    không làm đc bro ơi

  15. sao mình ko down đc file popup js

  16. Anh ơi cái popup này nó đâu có hiện 1 lần. Em làm vào link nào nó cũng hiện popup. ANh chỉ e cách sửa với ạ

    • POPUP hiện nay đã không cho chạy nữa rồi bạn ơi :) Bạn xem thời gian viết bài là khi nào thế :)

      Tự demo nhé ! Code mình đã đưa vẫn đang hoạt động tốt. Có thể bạn set cookie bị sai.

      • Vâng đúng là code vẫn chạy tốt nhưng mà vào trang nào của web nó cũng hiện lên ấy ạ. A giúp em xem chỉnh code ở đoạn nào với ạ

  17. Đỗ Văn Kiên says:

    Làm sao để close cái DIV popup ấy thưa đồng chí?

  18. Do Van Kien says:

    Cam on su chia se cua anh Nhan nhe! :D

  19. Bác Nhân cho em cái code quảng cáo cuối trang đi ạ

  20. Vương Minh Đăng says:

    Anh ơi share cho em cái code hiện quảng cáo dưới góc phải màn hình như của anh qua mail cho em với, em sử dụng code này để làm thông báo thay vì quảng cáo được ko anh???, có gì chỉ dẫn chi tiết cho em qua mail với nhé, cám ơn anh!

  21. Anh xem hộ em cái
    em chèm sript css html vô rùi
    em chèm đoạn này để khi ấn vào tiếp ra mà nó cứ lên top

  22. Cái này đẹp miễn chê rồi. Ngon hơn các plugin trả phí. Test hàng xem nào thấy demo hình đẹp quá. Không biết load nhanh không. Thanks anh. :D

  23. Anh Nhân cho em xin skin web http://saoxinh.com với, cảm ơn anh nhiều, trang đó bằng WP chắc anh ạ

  24. Anh Nhân có popup nào hiện thì khung like facebook mà đã link rồi thì không hiễn thị popup nữa ko? Và like rồi thì tự mất pupup luôn cho người dùng đọc tin.

  25. Cảm ơn bác Nhân, nhưng bác cho e hỏi là e muốn cho nó luôn fixed ở giữa trang thì làm thế nào ạ

Speak Your Mind

*

:D :) >:D< :P :(( :beat: ;):x L-) ;)) :shot: =)) :kill: >:) =P~ more »