»
AnglaisFrançaisVietnamien

Imprimer - DIV Layer Popup onClick - JavaScriptBank.com

Version complète: jsB@nk » Browser » Popup » DIV Layer Popup onClick
URL: https://www.javascriptbank.com/div-layer-popup-onclick.html

DIV Layer Popup onClick © JavaScriptBank.comCe JavaScript vous aide à ouvrir couche flottante popups. Les couches toujours rester au top, qui permet à vos visiteurs de travail dans les principaux fenêtre tout en étant capable de visualiser le contenu des fenêtres pop-up. Le fenêtre de popups rester dans le même lieu, même lorsque l'utilisateur fait défiler la page. Il travaille aussi avec image cartes.

Version complète: jsB@nk » Browser » Popup » DIV Layer Popup onClick
URL: https://www.javascriptbank.com/div-layer-popup-onclick.html



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>


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


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>