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. Điểm cải tiến ở đây so với 1 số PopUp khác đó là CSS PopUp 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
Đầ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:
|
1
|
<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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<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
|
1
2
3
4
5
6
7
|
<div id="blanket" style="display: none;"></div>
<div id="popUpDiv" style="display: none;">
<a href="#" onclick="popup('popUpDiv')">Click Me To Close</a>
<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
|
1
|
<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.