JavaScriptBank
28-01-2010, 09:35 AM
Đoạn mã JavaScript này sẽ tạo một cửa sổ (http://www.javascriptbank.com/javascript/browser/window/) popup (http://www.javascriptbank.com/javascript/browser/popup/) ngay bên trong trang web bằng cách sử dụng mộ... chi tiết (http://www.javascriptbank.com/div-layer-popup-onclick.html/vi//) tại JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)
http://www.javascriptbank.com/javascript.images/browser/div-layer-popup-onclick.jpg (http://www.javascriptbank.com/javascript/browser/popup/div-layer-popup-onclick/preview/vi/)
Demo: JavaScript Cửa sổ popup tự động trượt (http://www.javascriptbank.com/div-layer-popup-onclick.html/vi/)
| JavaScript DIV Layer Popup onClick (http://www.javascriptbank.com/div-layer-popup-onclick.html)
Cách cài đặt
Bước 1: Copy mã CSS bên dưới và dán vào khu vực HEAD trên trang web của bạn
CSS
<style type="text/css">
/*
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
.jsbank_sample_cont {margin: 20px; padding: 20px;}
.jsbank_sample_tit {font-weight: bold; margin-bottom: 10px; padding: 5px; width: auto; background-color: #c0c0c0; border: 5px solid #a0a0a0; color: black; text-align: center;}
/*
Created by: Jeroen Haan
Web Site: http://www.haan.net/
*/
#layer1 {
position: absolute;
visibility: hidden;
width: 400px;
height: 300px;
left: 20px;
top: 300px;
background-color: #ccc;
border: 1px solid #000;
padding: 10px;
}
#close {
float: right;
}
</style>
Bước 2: Đặt mã JavaScript bên dưới vào phần HEAD
JavaScript
<SCRIPT type=text/javascript>
<!--
// Created by: Jeroen Haan :: http://www.haan.net/
/* -----------------------------------------------
Floating layer - v.1
(c) 2006 www.haan.net
contact: [email protected]
You may use this script but please leave the credits on top intact.
Please inform us of any improvements made.
When usefull we will add your credits.
------------------------------------------------ */
x = 20;
y = 70;
function setVisible(obj)
{
obj = document.getElementById(obj);
obj.style.visibility = (obj.style.visibility == 'visible') ? 'hidden' : 'visible';
}
function placeIt(obj)
{
obj = document.getElementById(obj);
if (document.documentElement)
{
theLeft = document.documentElement.scrollLeft;
theTop = document.documentElement.scrollTop;
}
else if (document.body)
{
theLeft = document.body.scrollLeft;
theTop = document.body.scrollTop;
}
theLeft += x;
theTop += y;
obj.style.left = theLeft + 'px' ;
obj.style.top = theTop + 'px' ;
setTimeout("placeIt('layer1')",500);
}
window.onscroll = setTimeout("placeIt('layer1')",500);
//-->
</SCRIPT>
Bước 3: Đặt mã HTML bên dưới vào phần BODY
HTML
<DIV id=layer1><SPAN id=close><A style="TEXT-DECORATION: none"
href="javascript:setVisible('layer1')"><STRONG>Hide</STRONG></A></SPAN>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci.</P><BR><BR><IMG height=65
src="../image/logojs.gif" width=120 border=0> </DIV>
<p>This link uses the onclick event handler.<br>
<a href="#" onclick="setVisible('layer1');return false" target="_self">Open popup</a></p>
<p>This next one uses the javascript link inside the href tag.<br>
<a href="javascript:setVisible('layer1',true)">Open popup</a></p>
<form>
And this one uses the input button inside a form tag.<br>
<input type="button" value="Open popup" onclick="setVisible('layer1')">
</form>
<p>It can also be used in an image map. Here, the word 'Webhost' contains the link<br>
<img src="../image/logojs.gif" width="120" height="65" border="0" usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="1,1,113,23" href="#" onclick="setVisible('layer1');return false" target="_self">
</map>
Các hiệu ứng tương tự
- Bộ chọn ngày với cửa sổ phụ (http://www.javascriptbank.com/time-picker-with-child-window.html/vi/)
- Mở liên kết trong cửa sổ mới (http://www.javascriptbank.com/link-enhancer-index.html/vi/)
- Mở liên kết trong các cửa sổ mới (http://www.javascriptbank.com/opening-new-windows.html/vi/)
Một vài nhãn tương tự: cửa sổ popup (http://www.javascriptbank.com/vi+tag=cửa sổ popup), cửa sổ (http://www.javascriptbank.com/vi+tag=cửa sổ), popup (http://www.javascriptbank.com/vi+tag=popup), tự động (http://www.javascriptbank.com/vi+tag=tự động), trượt (http://www.javascriptbank.com/vi+tag=trượt), layer (http://www.javascriptbank.com/vi+tag=layer), thanh cuộn (http://www.javascriptbank.com/vi+tag=thanh cuộn), trình duyệt (http://www.javascriptbank.com/vi+tag=trình duyệt)
Bạn có thể xem thêm nhiều JavaScript khác về Trình duyệt (http://www.javascriptbank.com/javascript/browser/vi/) và Popup (http://www.javascriptbank.com/javascript/browser/popup/vi/)
Bảng đăng nhập (http://www.javascriptbank.com/forum/giup-em-co-cai-bang-dang-nhap-nhu-cua-trang-chu-t636.html) - Cách tạo id động (http://www.javascriptbank.com/forum/xin-code-tao-id-tu-dong-t351.html) - Hiệu ứng phóng to thu nhỏ ảnh với javascript (http://www.javascriptbank.com/vi+title=phóng to thu nhỏ)
http://www.javascriptbank.com/javascript.images/browser/div-layer-popup-onclick.jpg (http://www.javascriptbank.com/javascript/browser/popup/div-layer-popup-onclick/preview/vi/)
Demo: JavaScript Cửa sổ popup tự động trượt (http://www.javascriptbank.com/div-layer-popup-onclick.html/vi/)
| JavaScript DIV Layer Popup onClick (http://www.javascriptbank.com/div-layer-popup-onclick.html)
Cách cài đặt
Bước 1: Copy mã CSS bên dưới và dán vào khu vực HEAD trên trang web của bạn
CSS
<style type="text/css">
/*
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
.jsbank_sample_cont {margin: 20px; padding: 20px;}
.jsbank_sample_tit {font-weight: bold; margin-bottom: 10px; padding: 5px; width: auto; background-color: #c0c0c0; border: 5px solid #a0a0a0; color: black; text-align: center;}
/*
Created by: Jeroen Haan
Web Site: http://www.haan.net/
*/
#layer1 {
position: absolute;
visibility: hidden;
width: 400px;
height: 300px;
left: 20px;
top: 300px;
background-color: #ccc;
border: 1px solid #000;
padding: 10px;
}
#close {
float: right;
}
</style>
Bước 2: Đặt mã JavaScript bên dưới vào phần HEAD
JavaScript
<SCRIPT type=text/javascript>
<!--
// Created by: Jeroen Haan :: http://www.haan.net/
/* -----------------------------------------------
Floating layer - v.1
(c) 2006 www.haan.net
contact: [email protected]
You may use this script but please leave the credits on top intact.
Please inform us of any improvements made.
When usefull we will add your credits.
------------------------------------------------ */
x = 20;
y = 70;
function setVisible(obj)
{
obj = document.getElementById(obj);
obj.style.visibility = (obj.style.visibility == 'visible') ? 'hidden' : 'visible';
}
function placeIt(obj)
{
obj = document.getElementById(obj);
if (document.documentElement)
{
theLeft = document.documentElement.scrollLeft;
theTop = document.documentElement.scrollTop;
}
else if (document.body)
{
theLeft = document.body.scrollLeft;
theTop = document.body.scrollTop;
}
theLeft += x;
theTop += y;
obj.style.left = theLeft + 'px' ;
obj.style.top = theTop + 'px' ;
setTimeout("placeIt('layer1')",500);
}
window.onscroll = setTimeout("placeIt('layer1')",500);
//-->
</SCRIPT>
Bước 3: Đặt mã HTML bên dưới vào phần BODY
HTML
<DIV id=layer1><SPAN id=close><A style="TEXT-DECORATION: none"
href="javascript:setVisible('layer1')"><STRONG>Hide</STRONG></A></SPAN>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci.</P><BR><BR><IMG height=65
src="../image/logojs.gif" width=120 border=0> </DIV>
<p>This link uses the onclick event handler.<br>
<a href="#" onclick="setVisible('layer1');return false" target="_self">Open popup</a></p>
<p>This next one uses the javascript link inside the href tag.<br>
<a href="javascript:setVisible('layer1',true)">Open popup</a></p>
<form>
And this one uses the input button inside a form tag.<br>
<input type="button" value="Open popup" onclick="setVisible('layer1')">
</form>
<p>It can also be used in an image map. Here, the word 'Webhost' contains the link<br>
<img src="../image/logojs.gif" width="120" height="65" border="0" usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="1,1,113,23" href="#" onclick="setVisible('layer1');return false" target="_self">
</map>
Các hiệu ứng tương tự
- Bộ chọn ngày với cửa sổ phụ (http://www.javascriptbank.com/time-picker-with-child-window.html/vi/)
- Mở liên kết trong cửa sổ mới (http://www.javascriptbank.com/link-enhancer-index.html/vi/)
- Mở liên kết trong các cửa sổ mới (http://www.javascriptbank.com/opening-new-windows.html/vi/)
Một vài nhãn tương tự: cửa sổ popup (http://www.javascriptbank.com/vi+tag=cửa sổ popup), cửa sổ (http://www.javascriptbank.com/vi+tag=cửa sổ), popup (http://www.javascriptbank.com/vi+tag=popup), tự động (http://www.javascriptbank.com/vi+tag=tự động), trượt (http://www.javascriptbank.com/vi+tag=trượt), layer (http://www.javascriptbank.com/vi+tag=layer), thanh cuộn (http://www.javascriptbank.com/vi+tag=thanh cuộn), trình duyệt (http://www.javascriptbank.com/vi+tag=trình duyệt)
Bạn có thể xem thêm nhiều JavaScript khác về Trình duyệt (http://www.javascriptbank.com/javascript/browser/vi/) và Popup (http://www.javascriptbank.com/javascript/browser/popup/vi/)
Bảng đăng nhập (http://www.javascriptbank.com/forum/giup-em-co-cai-bang-dang-nhap-nhu-cua-trang-chu-t636.html) - Cách tạo id động (http://www.javascriptbank.com/forum/xin-code-tao-id-tu-dong-t351.html) - Hiệu ứng phóng to thu nhỏ ảnh với javascript (http://www.javascriptbank.com/vi+title=phóng to thu nhỏ)