Phiên bản đầy đủ: jsB@nk » Trình duyệt » Popup » Cửa sổ popup tự động trượt
URL: https://www.javascriptbank.com/div-layer-popup-onclick.html
Đoạn mã JavaScript này sẽ tạo một cửa sổ popup ngay bên trong trang web bằng cách sử dụng một layer có thể tự động trượt theo các thanh cuộn của trình duyệt.
Phiên bản đầy đủ: jsB@nk » Trình duyệt » Popup » Cửa sổ popup tự động trượt
URL: https://www.javascriptbank.com/div-layer-popup-onclick.html
<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><SCRIPT type=text/javascript><!--// Created by: Jeroen Haan :: http://www.haan.net//* ----------------------------------------------- Floating layer - v.1 (c) 2006 www.haan.net contact: jeroen@haan.net 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><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>