Une fenêtre non popup sur une page d'accueil

Botity -
raphael - 8 déc. 2008 à 16:55

Bonjour,
Voilà mon problème, sur Dreamweaver, je voudrais créer une fenêtre indépendante qui s'affiche en même temps que la page d'accueil comportant un bouton de fermeture dans le genre "X" d'une fenêtre windows. J'aimerais bien que ce soit une fenêtre que IE ne pourrais pas bloquer comme les autres fenêtre PopUp.

D'avance merci

Afficher la suite

A voir également:

Une fenêtre non popup sur une page d'accueil
Comment supprimer une page sur word - Guide
Page d'accueil - Guide
Page accueil iphone - Guide
Imprimer tableau excel sur une page - Guide
Comment traduire une page internet - Guide

15 réponses

Réponse 1 / 15

gaerebut Messages postés 1060 Statut Membre 171

Salut,

utilise la library window.js

Pour plus d'info, demande moi ;)

A+

Gaerebut

Réponse 2 / 15

petinouv Messages postés 696 Statut Membre 82

Salut,

ça s'appelle une popup dhtml : http://www.javascriptfr.com

;)

Réponse 3 / 15

Botity

Merci pour la réponse immédiate, mais peux tu m'indiquer où est ce-quon peut trouver "library windows.js" et comment l'utiliser ?

@+

petinouv Messages postés 696 Statut Membre 82

regarde mon lien : pas besoin de librairie supplémentaire :)

Réponse 4 / 15

Botity

Ok, ton truc est génial mais faut que je trouve une façon de faire apparaître cette fenêtre sur ma page d'accueil, à priori faut créer une nouvelle page html au lieu de l'inserer dans le code source de ma page d'accueil.
Sinon, ça résolu l'1/3 de mon problème...

petinouv Messages postés 696 Statut Membre 82

mais faut que je trouve une façon de faire apparaître cette fenêtre sur ma page d'accueil, à priori faut créer une nouvelle page html au lieu de l'inserer dans le code source de ma page d'accueil. mais non, pas besoin d'autre page !

mets ceci entre <head> et </head> :

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

ça dans body :

<body onload="init();">

et ça entre <body> et </body> :

<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">&eacute;crivez-moi pour
            plus de d&eacute;tails</a></p></td>
          </tr>
    </table>
        <p><font size="4">	    </font> </p>
  </div>
	<div id="resizeCapture"></div>	
</div>

Tout simplement :)

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 15

gaerebut Messages postés 1060 Statut Membre 171

Oui oui c'est bien ça que je te parle window.js

Est-ce ceci ? ==> https://www.prototype-ui.com/ (Clique sur M.propre Lol)

Pour l'utilisation ==> http://docs.prototype-ui.com/rc0/Window

A+

Gaerebut

Réponse 6 / 15

Botity

Ok Gaerebut, ça a l'air intéressant je vais explorer ça de suite et je t'en dirai des nouvelles.

Si quelqu'un possède d'autres soluces, suis toujours preneur.... Je reste en ligne. thank's

Réponse 7 / 15

gaerebut Messages postés 1060 Statut Membre 171

Ben il y a d'autre alternative comme avec la library jquery.js et prototype.js ou l'on peut faire apparaître un "fenêtre" et griser le fond le rendant inaccesible!

A+

GAerebut

Réponse 8 / 15

Botity

petinouv > C'est trop cool, je vais essayer tout ça et je te dirai si ça marche, ça a l'air simplos comme tu dis.

Thank's

Réponse 9 / 15

gaerebut Messages postés 1060 Statut Membre 171

PAs mal ton code ;)

Un peu basique et c'est un peu bête de réinventer la roue mais bon ... quand on que ça a faire ... lol

Quelque bug aussi mais sympa comme tout ^^

A+

Gaerebut

petinouv Messages postés 696 Statut Membre 82

C'est pas le mien, mais c'est ce que j'ai trouvé de plus simple pour faire des popups dhtml sans librairie extérieure répondant à ses attentes :)

Réponse 10 / 15

Botity

petinouv >
Ok, j'ai essayer ton codage ça marche nickel, seulement il va falloir que je personnalise tout ça maintenant, déjà faut que j'y mette une image d'une taille en Px 828/390 et ton truc il est monté calque sur calque, ce qui me parait évident dans le genre.

Je me mets au travail... Merci.

Réponse 11 / 15

gaerebut Messages postés 1060 Statut Membre 171

Puis c'est pas très beau aussi (enfin après ça c'est juste du css).
Mais il ya des bug par exemple au niveau du mouvement de la fenêtre, la souris et replacé dans la coins supérieur gauche quand on la bouge ! Puis les boutons et images apparaissent pas chez moi.

Mais sinon c'est sympa, par contre ça ne doit pas être paramètrable et il ne dois pas y avoir beaucoup d'otion voir pas du tout ...

A+

Gaerebut

Réponse 12 / 15

Botity

Juste un petit bug au niveau du "ControlBox" et Firefox
...

Réponse 13 / 15

botity Messages postés 31 Statut Membre 2

Merci les gars c'est très sympa de votre part de m'avoir dépanner, ce que je vais faire : Avec les 2 soluces qu'on a là je crois pouvoir arriver à quelque chose de concrète. Quand j'aurais fini le site je le mettrai ici pour que les gens puissent l'évaluer... Thank's to all ('_')...

Réponse 14 / 15

botity Messages postés 31 Statut Membre 2

C'est bon les gars, j'ai mis en place la petite fenêtre qui s'ouvre en même temps que la page d'accueil, c'est à peu près ce que je voulais : une fenêtre indépendante qui n'a rien à voir avec un popup, on peut la déplacer, et surtout la fermer, il n'y a que 3 layers de-dans et on peut la restructurer sans problème et s'adapte automatiquement avec la taille d'une image ou d'une animation flash.

http://www.sendra.fr/
"le site nest pas encore fini"

C'est quand même grâce à vous que j'ai pu concrétiser ça... Merci encore.

BmV Messages postés 43242 Date d'inscription Statut Modérateur Dernière intervention 4 895

Juste pour info : attention "Sendra" est déjà une marque déposée ==> http://www.sendraboots.co.uk/

Réponse 15 / 15

botity Messages postés 31 Statut Membre 2

il n'est pas 100% réussi, cos il y a un bug sur Firefox...

raphael

Je vous invite a découvir "JQuery" et/ou "lightwindow". Depuis que je les ai découvert, c'est 100% compatible et Zero stress.

Discussions similaires

comment revenir à ma page d'accueil "google.fr" ?

Une fenêtre non popup sur une page d'accueil

15 réponses

Votre réponse

Discussions similaires

Newsletters