NHANWEB

Blog kinh doanh trên Internet và kĩ thuật lập trình website

You are here: Home / Newbie / HTML/CSS / CSS PopUp – Hiện POPUP đẹp hơn, dễ dàng hơn…

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

by

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

[/code]

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

Comments

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

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

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

  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 ?

  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 ạ

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

  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 ạ

  27. Bác có thể cho em xin file download javascript popup được không ạ, hiện tại không thấy file download nữa.
    Mail em: [email protected] tks bác trước

Nhận bài viết mới

Hãy nhập email của bạn:

Liên kết hữu ích cho bạn: Review Hosting

Trở thành tác giả

Bạn sẽ đặt câu hỏi bạn sẽ được lợi ích gì từ việc viết bài trên NhanWeb?

Chúng tôi xin trả lời bạn là những việc làm của chúng tôi, và cả bạn(nếu được) đều nhằm mục đích đem lại những điều hữu ích cho cộng đồng. Tất cả đều xuất phát từ tâm huyết của người viết đối với cộng đồng blogger và việc truyền bá kiến thức của nhân loại.

Xin xem thêm Chính sách tác giả »

Cảm ơn tác giả bài viết ???

Bạn đọc những bài viết trên NhanWeb và giải quyết được những câu hỏi của mình, bạn muốn gửi chút ít chi phí xem như lời cảm ơn tác giả ?

Tôi sẽ rất vui nếu những bài viết của tôi có ích cho bạn đọc NhanWeb. Phần thưởng bạn dành cho tôi dù nhỏ hay lớn luôn là một lời khích lệ thiết thực cho tôi khi đặt tay lên bàn phím. Nếu bạn có nhả ý gửi tặng tôi chút đỉnh chi phí thay cho lời cảm ơn (50k, 100k... hay hơn thế nữa). Bất cứ lúc nào bạn cũng có thể có số tài khoản của tôi tại trang Liên hệ ».