Hiển thị các bài đăng có nhãn Popup. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Popup. Hiển thị tất cả bài đăng

Thành phần hiển thị popup đóng tự động

Người đăng: yeu mai em on Thứ Tư, 12 tháng 1, 2011

Một thông báo dạng popup rất cần thiết trong thiết kế web, đặc biệt ứng dụng cho các hình ảnh quảng cáo động. Bạn có thể điều chỉnh khoảng thời gian hiển thị để thành phần popup tự động đóng.

Thông thường để tạo một kiểu quảng cáo dạng popup như vậy, kỹ thuật webdesign phải dùng đến script có dung lượng khá lớn. Tuy nhiên ở đây, tôi sử dụng chức năng đóng thành phần giúp cho script khá gọn nhẹ.

Bạn hãy đặt đoạn code sau đây vào trước thẻ </head>.

<script type='text/javascript'>
function closeelement(){
div = document.getElementById("closeelement");

div.style.display= "none";
}
setTimeout(closeelement, 60000);
</script>

Chú ý trong đoạn code trên, con số 60000 là 60000 mili giây, tức 60 giây, là thời gian hiển thị rồi tự động đóng thành phần.

Trong phần thân trang web, sau thẻ <body>, bạn thiết lập cấu trúc HTML như sau.

<div id='closeelement' style='border: 0 !important; background: transparent; left:15px;bottom:15px;position:fixed;width: 190px;z-index:9999'>
<a href='javascript:closeelement();'>
<img src='http://img405.imageshack.us/img405/1535/closeicon.png' style='float: right;border: 0' title='Đóng'/>
<img src='URL_hình ảnh' style='border: 0'/><br />
Nội dung khác // Nếu bạn chỉ sử dụng hình ảnh thì bỏ phần này
</a>
</div>

Các tham số left, right, top, bottom, z-index dùng để điều chỉnh tọa độ của thành phần hiển thị popup đóng tự động.



More about

Tạo cửa sổ popup sử dụng Javascript

Người đăng: yeu mai em on Chủ Nhật, 12 tháng 12, 2010

Đôi khi bạn phải sử dụng Popup window để tạo liên kết đến một trang web khác. Popup window thường xuyên được sử dụng trong thiết kế web. Bạn hãy click chuột vào liên kết Demo dưới đây để thấy tác dụng của thủ thuật này.

Xem Demo


Để tạo Popup window như thế, trước tiên đặt đoạn code dưới đây vào trước thẻ </head>.

<script type="text/javascript">
//<![CDATA[
function OpenPopup(Url,WindowName,width,height,extras,scrollbars) {
var wide = width;
var high = height;
var additional= extras;
var top = (screen.height-high)/2;
var leftside = (screen.width-wide)/2; newWindow=window.open(''+ Url + '',''+ WindowName + '','width=' + wide + ',height=' + high + ',top=' + top + ',left=' + leftside + ',features=' + additional + '' + ',scrollbars=1');
newWindow.focus();
}
//]]>
</script>

Tiếp theo thiết lập cấu trúc HTML như sau và đặt tại vị trí muốn hiển thị liên kết đến một trang web khác.

<a href="javascript: void(0);" onclick=" javascript:OpenPopup('http://huynh-nhat-ha.blogspot.com/','WindowName','510','280','scrollbars=1');">Liên kết đến trang khác</a>

Trong đoạn code HTML ở trên, bạn cần thay đổi những phần được đánh dấu màu đỏ cho phù hợp.
More about

Tạo cửa sổ pop-up thông báo “Happy New Year…” cho Blogger

Người đăng: yeu mai em on Chủ Nhật, 17 tháng 10, 2010

Trong mỗi dịp tết đến chắc hẳn không ít các bạn trong cộng đồng Blogger mong muốn Blog của mình có một câu thông báo chúc mừng năm mới mỗi khi người lướt web đánh địa chỉ blog của bạn trên thanh địa chỉ của công cụ trình duyệt.

Mình sẽ hướng dẫn bạn thực hiện điều này bằng cách sử dụng JavaScript.


Đăng nhập Blogger, vào chỉnh sửa Template. Đặt đoạn code dưới đây vào trước dòng <b:skin><![CDATA[/* rồi lưu Template là xong. Chú ý phần code JavaScript bên dưới phải nằm dưới các thẻ meta.

<script language='JavaScript'>
//<![CDATA[
var alertmessage="Happy New Year! \n Everything to your liking!"

//Alert only once per browser session (0=no, 1=yes)
var once_per_session=1

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function alertornot(){
if (get_cookie('alerted')==''){
loadalert()
document.cookie="alerted=yes"
}
}

function loadalert(){
alert(alertmessage)
}

if (once_per_session==0)
loadalert()
else
alertornot()

//]]>
</script>

Bạn có thể copy địa chỉ http://bloggertestland.blogspot.com/ rồi dán vào thanh địa chỉ trên công cụ trình duyệt để xem kết quả hiệu ứng này.

Lưu ý bạn có thể thay đổi nội dung thông báo tùy ý và thông báo chỉ xuất hiện khi mở địa chỉ trang chủ lần đầu tiên.
More about