1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Fenêtre & Pop-up
  5. Fausse popup dhtml 100% semblable aux vraies (apparence et fonctionnalités)

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

Soyez le premier à donner votre avis sur cette source.

Vue 28 165 fois - Téléchargée 3 467 fois

Télécharger le projet
Commenter

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.
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
MisterLuis Messages postés 2 Date d'inscription mercredi 30 juillet 2008 Statut Membre Dernière intervention 23 mars 2010
23 mars 2010 à 13:51
Merci !

Je pense que ça va bien m'aider.
cs_NEVERFORGET Messages postés 21 Date d'inscription dimanche 10 octobre 2004 Statut Membre Dernière intervention 23 juin 2008
23 mars 2010 à 13:44
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.
MisterLuis Messages postés 2 Date d'inscription mercredi 30 juillet 2008 Statut Membre Dernière intervention 23 mars 2010
23 mars 2010 à 10:57
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.
kiki67100 Messages postés 313 Date d'inscription samedi 6 mai 2006 Statut Membre Dernière intervention 10 août 2013 1
13 mars 2007 à 19:29
Tous sa pour saaaa !!!! :X
mais je mis 7/10 pour le travail bravo
vraiment bienfait
sexycool Messages postés 1 Date d'inscription mercredi 23 avril 2003 Statut Membre Dernière intervention 26 février 2007
26 févr. 2007 à 21:58
houla qu'il est looooooonnnnnnngggggg ce code
Afficher les 9 commentaires
S'inscrire maintenant

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)