Fausse popup dhtml 100% semblable aux vraies (apparence et fonctionnalités)

Soyez le premier à donner votre avis sur cette source.

Vue 27 919 fois - Téléchargée 3 441 fois

Description

J'ai enfin trouvé et amélioré un script qui représente une fausse popup DHTML en tous points semblable (apparence et fonctionnalités) aux vraies. Vous avez même la possibilité d'ajouter votre logo en haut de la fenêtre à gauche (fichier icon, ligne 114)et un texte d'explication ou de pub(ligne 91). Inutile de dire qu'elle n'est pas bloquée par les systèmes habituels de blocage de fenêtres publicitaires intempestives. Alors usez-en sans en abuser. Tout est dans le zip. Bonne prog à tous.

Source / Exemple :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Fausse popup DHTML</title>
<style type="text/css">
#windowContainer {
	position:absolute;
	top:10px;
	left:10px;
	background-color:#C0C0C0;
	border-style:solid;
	border-width:1px;
	border-top-color:#E0E0E0;
	border-left-color:#E0E0E0;
	width:300px;
	height:300px;
}

#windowContainerBorder1 {
	position:absolute;
	top:0px;
	left:0px;
	width:298px;
	height:298px;
	border-style:solid;
	border-width:1px;
	border-top-color:#FFFFFF;
	border-left-color:#FFFFFF;
	border-bottom-color:#808080;
	border-right-color:#808080;
}

#windowTitle {
	position:absolute;
	top:3px;
	left:3px;
	width:292px;
	height:18px;
	background-color:#000080;
	font-family:ms sans serif;
	font-size:8pt;
	padding-left:2px;
	font-weight:bold;
	color:#FFFFFF;
	cursor:default;
	vertical-align:middle;
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#000080', EndColorStr='#96C8FF');
}

#controlBox {
	position:absolute;
	top:5px;
	left:243px;
}

body {
	background-color:#FFFFFF;
}

#contentArea {
	position:absolute;
	padding:5px;
	top:23px;
	left:3px;
	width:282px;
	height:250px;
	background-color:#FFFFFF;
	border-style:inset;
	border-width:2px;
	overflow:auto;
}

#resizeCapture {
	position:absolute;
	top:287px;
	left:286px;
	width:12px;
	height:12px;
	cursor:nw-resize;
	background-image:url("resizeArea.gif");
	overflow: hidden;
}

</style>

<script language="javascript" type="text/javascript">
var WIN_HEIGHT = 300;
var WIN_WIDTH = 300;
var WIN_TITLE = "- Informations";
var WIN_TOP  = 10;
var WIN_LEFT = 10;

var y,x;
var mDown = false;
var mResize = false;

var originalWidth = WIN_WIDTH;
var originalHeight = WIN_HEIGHT;
var originalTop = WIN_TOP;
var originalLeft = WIN_LEFT;

var isMaximized = false, isMinimized = false;

function init() {
	if(document.all)document.body.style.height = "100%";
	document.getElementById("windowContainer").style.height = WIN_HEIGHT;
	document.getElementById("windowContainer").style.width = WIN_WIDTH;
	document.getElementById("windowContainer").style.top = WIN_TOP;
	document.getElementById("windowContainer").style.left = WIN_LEFT;

	document.getElementById("windowTitle").innerHTML ="<img align=middle src=\"icon.gif\"> " +  WIN_TITLE;

	// event handlers
	if(!document.all)document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP);
	document.onmousedown=handleMouseDownEvents;
	document.onmousemove=handleMouseMoveEvents
	document.onmouseup=handleMouseUpEvents;
	document.getElementById("windowTitle").onmouseup = windowTitleMouseUp
	document.getElementById("windowTitle").onmousedown = windowTitleMouseDown;
	document.getElementById("resizeCapture").onmousedown  = resizeCaptureOnMouseDown; 
}

function resizeCaptureOnMouseDown(e) {
	mResize=true;
	captureClientXY(e); 
}

function windowTitleMouseUp() {
	mDown = false;
}

function windowTitleMouseDown(e) {
	mDown=true;
	captureOffsetXY(e);
}

function initDrag(e) {
	if(!mDown)return;
	if(document.all) {
		x2 = window.event.clientX-(x+5);
		y2 = window.event.clientY-(y+5);
	} else {
		x2 = e.clientX - (x+5);
		y2 = e.clientY - (y+5);
	}
	document.getElementById("windowContainer").style.top = y2 + "px";
	document.getElementById("windowContainer").style.left = x2 + "px";
	originalLeft  = x2;
	originalTop = y2;
}

function doResize(nX,nY) {
	nWidth = nX - x;
	nHeight = nY- y;
	cWidth = originalWidth; cHeight = originalHeight;
	cWidth+=nWidth; cHeight+=nHeight;
	if(cWidth<=75 || cHeight <= 75) return;
	document.getElementById("windowContainer").style.width = cWidth + "px";
	document.getElementById("windowContainer").style.height = cHeight + "px";

	//resize/move children
	document.getElementById("windowTitle").style.width = (cWidth -8) + "px";
	document.getElementById("windowContainerBorder1").style.width = (cWidth - 2) + "px";
	document.getElementById("windowContainerBorder1").style.height = (cHeight-2) + "px";
	document.getElementById("contentArea").style.width = (cWidth-18) + "px";
	document.getElementById("contentArea").style.height = (cHeight-50) + "px";
	
	document.getElementById("resizeCapture").style.top = (cHeight-13) + "px";
	document.getElementById("resizeCapture").style.left = (cWidth-13) + "px";

	document.getElementById("controlBox").style.left = (cWidth - 57) + "px";
}

function handleMouseUpEvents() {
	if(mDown) {
		mDown=false;
		return;
	}
	
	if(mResize) {
		mResize=false;
		document.body.style.cursor = "default";
		originalWidth = parseInt(document.getElementById("windowContainer").style.width);
		originalHeight = parseInt(document.getElementById("windowContainer").style.height);
	}
}

function doClose() {
	document.getElementById("windowContainer").style.display = "none";
}

function doMinimize() {
	if(!isMinimized) {
		markCoordinates();
		document.getElementById("windowContainer").style.height = 24 + "px";
		minTop = document.all?document.body.clientHeight:window.innerHeight;
		document.getElementById("windowContainer").style.top = (minTop-25) + "px";
		document.getElementById("contentArea").style.display = "none";
		document.getElementById("windowContainerBorder1").style.display = "none";
		document.getElementById("resizeCapture").style.display = "none";
		isMinimized = true;
	} else {
		document.getElementById("windowContainer").style.top = originalTop + "px";
		document.getElementById("windowContainer").style.left = originalLeft + "px";
		document.getElementById("windowContainer").style.height = originalHeight + "px";
		document.getElementById("contentArea").style.display = "block";
		document.getElementById("windowContainerBorder1").style.display = "block";
		document.getElementById("resizeCapture").style.display = "block";
		isMinimized = false;
	}
}

function doMaximize() {
	x=0;y=0;
	if(!isMaximized) {
		markCoordinates();
		document.getElementById("windowContainer").style.top = 0;
		document.getElementById("windowContainer").style.left = 0;
		doResize(screen.width - originalWidth,screen.height - originalHeight);
		document.getElementById("contentArea").style.display = "block";
		document.getElementById("windowContainerBorder1").style.display = "block";
		document.getElementById("resizeCapture").style.display = "block";
		isMaximized = true;
	} else {
		doResize(0,0);
		isMaximized = false;
		document.getElementById("windowContainer").style.top = originalTop + "px";
		document.getElementById("windowContainer").style.left = originalLeft + "px";
	}
}

function handleMouseDownEvents(e) {
	if(mResize) {
		document.body.style.cursor = "nw-resize";
	}
}

function markCoordinates() {
	originalLeft  = parseInt(document.getElementById("windowContainer").style.left);
	originalTop = parseInt(document.getElementById("windowContainer").style.top);
}

function handleMouseMoveEvents(e) {
	if(mDown) {
		initDrag(e);
		return;
	}
	if(mResize) {
		if(document.all) {
			doResize(window.event.clientX,window.event.clientY);
		} else {
			doResize(e.clientX,e.clientY);
		}
	}
}

function captureOffsetXY(e) {
	if(document.all) {
		x=window.event.offsetX;
		y=window.event.offsetY
	} else {
		x = e.pageX - e.clientX;
		y = e.pageY - e.clientY;
	}
}

function captureClientXY(e) {
	if(document.all) {
		x = window.event.clientX;
		y = window.event.clientY;
	} else {
		x = e.clientX;
		y = e.clientY;
	}
}
</script>
<map name="ctrlBox">
<area alt="Minimize" title="Minimize" coords="1,0,16,15" href="javascript:doMinimize();">
<area alt="Maximize" title="Maximize" coords="16,0,34,16" href="javascript:doMaximize();">
<area alt="Close" title="Close" coords="33,0,53,16" href="javascript:doClose();"">
</map>
</head>
<body onload="init();">
<div id="windowContainer"  unselectable=on>
	<div id="windowContainerBorder1"></div>
	<div onSelect="return false" id="windowTitle"></div>
	<div id="controlBox"><img src="control_box.gif" width="52" height="15" border="0" usemap="#ctrlBox" /></div>
  <div id="contentArea">
		<h1><u>Sites de référence :</u></h1>
        
        <table width="10" border="0">
          <tr>
            <td>&#8226;</td>
            <td><a href="http://www.fitline-wellness2.info" target="_blank"><img src="../../../../../a_worldsoft/Clients/www.fitline-wellness2.info/Logo%20Fitline.jpg" width="100" height="63" border="0" /></a></td>
          </tr>
        </table>        
    
    <table width="10" border="0">
      <tr>
        <td>&#8226;</td>
        <td><a href="http://www.kv-architecture.ch" target="_blank"><img src="file:///C|/a_worldsoft/Clients/www.kv-architecture.ch/images/kv-architecture%20titre.gif" width="258" height="28" border="0" /></a></td>
      </tr>
    </table>   
        
    <table width="214" border="0">
          <tr>
            <td width="9" height="62">&#8226;</td>
            <td width="195"><p><strong><font color="#A27D2B" size="4" face="Verdana, Arial, Helvetica, sans-serif">Votre futur
                    site</font></strong><br />
            <a href="mailto:christian.deforel@gmx.ch">écrivez-moi pour
            plus de détails</a></p></td>
          </tr>
    </table>
        <p><font size="4">	    </font> </p>
  </div>
	<div id="resizeCapture"></div>	
</div>
</body>
</html>

Conclusion :


Veuillez me prévenir en cas de bug.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
2
Date d'inscription
mercredi 30 juillet 2008
Statut
Membre
Dernière intervention
23 mars 2010

Merci !

Je pense que ça va bien m'aider.
Messages postés
21
Date d'inscription
dimanche 10 octobre 2004
Statut
Membre
Dernière intervention
23 juin 2008

Voilà un script que tu peux employer :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Div caché à l'ouverture de la page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" language="JavaScript">
<!--

function ShowHide(dBlock, dImage)
{
if (dBlock.style.display == "none")
{
dBlock.style.display = "block";
dImage.src = "http://217.196.177.129/wcms/ftp/c/cdwebdesign.ws/siteimages/2410.gif";

}
else
{
dBlock.style.display = "none";
dImage.src = "http://217.196.177.129/wcms/ftp/c/cdwebdesign.ws/siteimages/2411.gif";

}
return;
}

//-->
</script>
</head>



[Javascript:ShowHide(DescA, ImageA); ouvrir/cacher] la
fausse popup.





<script language="javascript" type="text/javascript">
<!--
document.getElementById("essai").style.display (readCookie("essaiBox") 'inline') ? 'inline' : 'none';
// -->
</script>

<tr>
<td height="521"> C'est là que tu mets ta fausse popup








</td>
</tr>







</html>

Commentaire :
Pour les signes "+" et "-" je te conseille de les enregistrer et de les mettre à la racine de ton site et de ne pas employer les miens (../2410.gif et ../2411.gif dans le "head" et le "body") car si je change quelque chose sur mon site...
Il s'agit simplement d'un style pour le div qui le cache à l'ouverture de la page et l'affiche en cliquant sur le lien.
Voilà, j'espère ainsi t'avoir aidé.
Bonne prog.
Messages postés
2
Date d'inscription
mercredi 30 juillet 2008
Statut
Membre
Dernière intervention
23 mars 2010

Bonjour,

étant novice dans la matière, j'ai pas trouvé où il fallait modifier le code. En fait, je voudrais que le popup apparaisse à l'aide d'un click sur un lien et non au démarrage de la page.
Quelqu'un pourrait-il m'aider ?

Merci.
Messages postés
313
Date d'inscription
samedi 6 mai 2006
Statut
Membre
Dernière intervention
10 août 2013
1
Tous sa pour saaaa !!!! :X
mais je mis 7/10 pour le travail bravo
vraiment bienfait
Messages postés
1
Date d'inscription
mercredi 23 avril 2003
Statut
Membre
Dernière intervention
26 février 2007

houla qu'il est looooooonnnnnnngggggg ce code
Afficher les 9 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_NEVERFORGET)