Fenètre flotante

Soyez le premier à donner votre avis sur cette source.

Snippet vu 16 433 fois - Téléchargée 29 fois

Contenu du snippet

Voici une petite fenètre flotante.

Source / Exemple :


Dans le Head :
<script>
//  by Erik Arvidsson for WebFX at http://webfx.eae.net  
var checkZIndex = true;
var dragobject = null;
var tx;
var ty;
var ie5 = document.all != null && document.getElementsByTagName != null;
function getReal(el) {
temp = el;
while ((temp != null) && (temp.tagName != "BODY")) {
	if ((temp.className == "moveme") || (temp.className == "handle")){
	el = temp;
	return el;
	}
	temp = temp.parentElement;
}
	return el;
}
function moveme_onmousedown() {
	el = getReal(window.event.srcElement)
	if (el.className == "moveme" || el.className == "handle") {
	if (el.className == "handle") {
	tmp = el.getAttribute("handlefor");
	if (tmp == null) {
	dragobject = null;
	return;
	}
	else
	dragobject = eval(tmp);
	}
	else 
	dragobject = el;
	if (checkZIndex) makeOnTop(dragobject);
	ty = window.event.clientY - getTopPos(dragobject);
	tx = window.event.clientX - getLeftPos(dragobject);
	window.event.returnValue = false;
	window.event.cancelBubble = true;
	}
	else {
	dragobject = null;
	}
}

function moveme_onmouseup() {
	if(dragobject) {
	dragobject = null;
	}
}

function moveme_onmousemove() {
	if (dragobject) {
	if (window.event.clientX >= 0 && window.event.clientY >= 0) {
	dragobject.style.left = window.event.clientX - tx;
	dragobject.style.top = window.event.clientY - ty;
	}
	window.event.returnValue = false;
	window.event.cancelBubble = true;
	}
}

function getLeftPos(el) {
	if (ie5) {
	if (el.currentStyle.left == "auto")
	return 0;
	else
	return parseInt(el.currentStyle.left);
	}
	else {
	return el.style.pixelLeft;
	}
}

function getTopPos(el) {
	if (ie5) {
	if (el.currentStyle.top == "auto")
	return 0;
	else
	return parseInt(el.currentStyle.top);
	}
	else {
	return el.style.pixelTop;
	}
}

function makeOnTop(el) {
	var daiz;
	var max = 0;
	var da = document.all;
	for (var i=0; i<da.length; i++) {
	daiz = da[i].style.zIndex;
	if (daiz != "" && daiz > max)
	max = daiz;
	}
	el.style.zIndex = max + 1;
}

if (document.all) { //This only works in IE4 or better
	document.onmousedown = moveme_onmousedown;
	document.onmouseup = moveme_onmouseup;
	document.onmousemove = moveme_onmousemove;
}

document.write("<style>");
document.write(".moveme	{cursor: move;}");
document.write(".handle	{cursor: move;}");
document.write("</style>");
</script>
<style>
<!--
#testDiv {position: relative;  height: 50px; width: 300px;
	 border: 2 outset white; background: lightyellow; margin: 0px;}
#title	{background: activecaption; font: caption; width: 100%;
	color: captiontext; padding: 3px; margin: 0px;}
#inner	{border: 2 inset white; margin: 0px; padding: 3px;height: 100%;}
-->
</style>

Dans le body :
<div id="testDiv">
<div class="handle" handlefor="testDiv" id="title">Titre de la fenêtre</div>
<div id="inner">
Le contenu de la fenêtre ici !
</div>
</div>

Conclusion :


Amusez-vous bien ! :)

A voir également

Ajouter un commentaire Commentaires
Messages postés
107
Date d'inscription
jeudi 23 septembre 2010
Statut
Membre
Dernière intervention
20 novembre 2011

firefox 5.0 ;)
Messages postés
107
Date d'inscription
jeudi 23 septembre 2010
Statut
Membre
Dernière intervention
20 novembre 2011

A revoir pour firefox 3.0 ;D
Messages postés
1
Date d'inscription
vendredi 13 février 2004
Statut
Membre
Dernière intervention
5 octobre 2005

cest bien ce scripte, mais qqn peut m'aidé pour fair la meme chose avec une popup (en javascripte)qui sera apelet par une iframe?
mon problem est que jai placé le lien d'appel de popup dans une ifram et quond je vai l'apelé le popup il prond une position en raport avec la position du ifram, donc si je deplace le assenceur de fenetre dans iframe le popup s'ouvre dans un mauvese position et le visiteur ne peut pas la consulter le contenue de cel ci.
j'ai pensé que si je peut adapter ce fonction mon popup restera toujour dans le même hauteur , mais je ne sais pas ou je peut metre le code parce que mon popup c'est n'est pas une fenetre en html, mais c'est une sorte de fenetre (slide)en javascript, donc n'a pas les balise <head> et
merci en avance
Messages postés
14
Date d'inscription
jeudi 21 août 2003
Statut
Membre
Dernière intervention
4 octobre 2006

Cool :)
Messages postés
323
Date d'inscription
lundi 24 février 2003
Statut
Membre
Dernière intervention
17 mai 2005

Pour la centrer :

<center>



Titre de la fenêtre



Le contenu de la fenêtre ici !




</center>

Et c'est tout !!!

Pyroflo
http://www.abcpyro.fr.st
Afficher les 6 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.