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

Comments

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

  2. says

    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.

  3. says

    À 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<

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

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

  5. diep says

    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 ạ

    • says

      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.

      • diep says

        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 ạ

  6. 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!

  7. Quang says

    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

  8. says

    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

  9. says

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

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