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 017 fois - Téléchargée 3 445 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
Signaler
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.
Signaler
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.
Signaler
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.
Signaler
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
Signaler
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
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)