Partage

probleme ajout balises

javascript

Sujet résolu

2 novembre 2008 à 15:44:51

j'ai fait un script, inspiré sur le tutoriel des déplacements de la souris, et mélangé avec des scripts externes, dont voila le code principal :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0046)http://b2moo.free.fr/tutorials/mouse/win_6.htm -->
<HTML><HEAD><TITLE>Fenêtre</TITLE>
<META http-equiv=Content-type content="text/html; charset=utf-8">
<script type="text/javascript" src="fenetres.js"></script>
<script type="text/javascript" src="gradient.js"></script>



<STYLE type=text/css>.window-base {
	BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; WIDTH: 400px; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; HEIGHT: 200px; BACKGROUND-COLOR: #ddd
}
.gradient{
	BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; WIDTH: 400px; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; HEIGHT: 200px; BACKGROUND-COLOR: #ddd
}
.window-close {
	FLOAT: right; BACKGROUND-COLOR: #eee
}
.window-min-max {
	FLOAT: right; BACKGROUND-COLOR: #eee
}
.window-move {
	WIDTH: 100%; CURSOR: move; COLOR: #fff; HEIGHT: 30px; BACKGROUND-COLOR: #00d
}
</STYLE>

<SCRIPT type=text/javascript>

	</SCRIPT>
<img src="a.bmp">
<META content="MSHTML 6.00.2900.3395" name=GENERATOR></HEAD>
<BODY>
<DIV style="WIDTH: 100%; HEIGHT: 100%">
<DIV class="window-base B8DEFD 4086BD vertical foo">
<DIV class=window-move><BUTTON class=window-close>X</BUTTON><BUTTON 
class=window-min-max>[]</BUTTON> Fenêtre d'exemple n°1 </DIV>Première fenêtre ! 
</DIV></DIV>

</DIV></BODY></HTML>

Vers le bas, il y a une image : ( <img src="a.bmp" onclick=a() /> )qui represente une icone . J'aimerais que quand on clique, une fenetre s'ouvre c'est à dire ce code s'execute :

<DIV class="window-base B8DEFD 4086BD vertical foo">
<DIV class=window-move><BUTTON class=window-close>X</BUTTON><BUTTON 
class=window-min-max>[]</BUTTON> Fenêtre d'exemple n°1 </DIV>Première fenêtre ! 
</DIV>

J'ai pensé a un OnClick, mais je ne sais pas comment créer une fonction qui insererais ces commandes. Il n'est pas possible de faire un lien car les autres fenetres ouvertes se fermeraient. On ne peut pas (du moins je crois) avec php savoir si une image a été cliqué . Quelqu'un a une petite idée de comment faire ? :euh:

PS : je ne suis pas du tout un pro en javascript. essayez donc de faire simple

domif

2 novembre 2008 à 17:08:51

Bonsoir
j'ai du mal à comprendre et le problème et le code. Qu'est ce que c'est que <img> dans la partie d'entête ? qu'est ce que c'est que tous ces div ? les balises <meta> qui se promènent partout ? la balise <button> à l'extérieur d'un formulaire ?
Pour avoir un "clic" sur une image, le plus simple est <input type="image" ... />

Timot

2 novembre 2008 à 17:29:50

Non mais c'est simple, il a pris un script de drag and drop sur un site qui peut le configurer.
C'est codé super salement et en fait il aimerait trouver comment faire pour ouvrir une fenetre lorsqu'on clique sur un bouton/lien/image.
Comment ouvrir une fenetre dynamiquement quoi.
Mais bon, je le laisse se débrouiller avec ce joli code tout crade copier coller

superpl

5 novembre 2008 à 11:07:00

/table>e code du tutoriel "les evenements de la souris", je l'ai modifié un peu et j'ai rajouté un autre script sur les dégradés que j'ai aussi modifié un peu. Ensuite, j'ai mis une image avec <image src= ... > . voila le code sans fichiers externes de code, que vous pouvez tester (pour voir l'icone, ajouter une petite image nommé "a.bmp" )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD><TITLE>Fenêtre</TITLE>
<META http-equiv=Content-type content="text/html; charset=utf-8">
<script type="text/javascript">var dragged = null;
<!--
var dX, dY;

function start_drag(objet,event)
{
	if( objet.max) return; //on quitte la fonction
  dragged = objet;
	
	event.returnValue = false;
	if( event.preventDefault ) event.preventDefault();
	
	//Coordonnées de la souris
  var x = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
  var y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
	

	//Coordonnées de l'élément
  var eX = 0;
  var eY = 0;
  var element = objet;
  do
  {
    eX += element.offsetLeft;
    eY += element.offsetTop;
    element = element.offsetParent;
	} while( element && getCssStyleValue(element, 'position') != 'absolute');

	//Calcul du décallage
  dX = x - eX;
  dY = y - eY;



}

function min_max(fenetre)
{
  if( ! fenetre.max )
  {
    fenetre.max = true;
    fenetre.oldTop = fenetre.style.top;
    fenetre.oldLeft = fenetre.style.left;
    fenetre.oldWidth = fenetre.style.width;
    fenetre.oldHeight = fenetre.style.height;
     
    fenetre.style.top = 0;
    fenetre.style.left = 0;
    fenetre.style.width = '100%';
    fenetre.style.height = '100%';
  }
  else
  {
    fenetre.max = false;
    fenetre.style.top = fenetre.oldTop;
    fenetre.style.left = fenetre.oldLeft;
    fenetre.style.width = fenetre.oldWidth;
    fenetre.style.height = fenetre.oldHeight;
  }
}

function close(fenetre)
{
  fenetre.parentNode.removeChild(fenetre);
  //ou: fenetre.style.display = 'none';
}
function drag_onmousemove(event) 
{
  if( dragged ) 
  {
    var x = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
    var y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
		
		//On applique le décalage
		x -= dX;
		y -= dY;

    dragged.style.position = 'absolute';
    dragged.style.left = x + 'px';
    dragged.style.top = y + 'px';
  }
}

function drag_onmouseup(event) 
{
  dragged = null; //On arrête le drag&drop
}

function addEvent(obj,event,fct)
{
  if( obj.attachEvent)
     obj.attachEvent('on' + event,fct);
  else
     obj.addEventListener(event,fct,true);
}

function getCssStyleValue(element /*element html*/, style/*style recherché*/)
{
  if( element.currentStyle )
  {
    return element.currentStyle[style];
  }
  else
  {
    return window.getComputedStyle(element,null).getPropertyValue(style);
  }
}

function drag_onmousedown (event)
{
  var target = event.target || event.srcElement;
  
  //On commence par trouver la fenêtre elle-même
  var fenetre = target;
  while( fenetre)
  {
    if( fenetre.className && fenetre.className.match(/\bwindow-base\b/g) )
    {
       break; //On arrête la boucle
    }
		fenetre = fenetre.parentNode;
  }
  if( !fenetre) //Si on est sorti de la boucle mais qu'on a trouvé aucune fenêtre, on abandonne
    return;

  //Maintenant, on part à la recherche d'un bouton déclencheur
  var element = target;
  while(element)
  {
    if( element.className)
    {
      if( element.className.match(/\bwindow-close\b/g))
      {
        close(fenetre);
        break;
      }
      else if( element.className.match(/\bwindow-min-max\b/g) )
      {
        min_max(fenetre);
        break;
			}
      else if( element.className.match(/\bwindow-move\b/g) )
      {
        start_drag(fenetre, event);
        break;
      }
    }
		element = element.parentNode;
  }

	//Mettre au premier plan
	var elements = document.getElementsByTagName('*'); //On récupère tous les éléments de la page
	var zIndex = 0;
	for( var i=0; i < elements.length; i++)
	{
					zIndex = Math.max(zIndex,elements[i].style.zIndex);
	}
	fenetre.style.zIndex = zIndex + 1; //toujours plus haut que le plus haut 

}
addEvent(document,'mousedown',drag_onmousedown);
addEvent(document,'mousemove',drag_onmousemove);
addEvent(document,'mouseup',drag_onmouseup);


-->
</script>
<script type="text/javascript">window.addEventListener?window.addEventListener("load",createGradient,false):window.attachEvent("onload",createGradient);

function createGradient() {
	if(!document.getElementById)return;
	
	objArray = getGradientObjects();
	if(!objArray.length) return;
	
	for(i=0;i<objArray.length;i++) {
		params = objArray[i].className.split(" ");
		if(document.all && !window.opera) {
			objArray[i].style.width = objArray[i].offsetWidth + "px";
			params[3] == "horizontal"?gType = 1:gType = 0;
			objArray[i].style.filter = "progid:DXImageTransform.Microsoft.Gradient(GradientType="+gType+",StartColorStr=\"#" + params[1] + "\",EndColorStr=\"#" + params[2] + "\")";
	} else {
			colorArray = createColorPath(params[1],params[2]);
			x=0;y=0;
			if(params[3] == "horizontal") {
				w=Math.round(objArray[i].offsetWidth/colorArray.length);
				if(!w)w=1;
				h = objArray[i].offsetHeight;
			} else {
				h = Math.round(objArray[i].offsetHeight/colorArray.length);
				if(!h) h =1;
				w = objArray[i].offsetWidth;
			}
			makeGrandParent(objArray[i]);
			tmpDOM = document.createDocumentFragment();
			for(p=0;p<colorArray.length;p++) {
				g = document.createElement("div");
				g.setAttribute("style","position:absolute;z-index:0;top:" + y + "px;left:" + x + "px;height:" + h + "px;width:" + w + "px;background-color:rgb(" + colorArray[p][0] + "," + colorArray[p][1] + "," + colorArray[p][2] + ");");
				params[3] == "horizontal"?x+=w:y+=h;
				tmpDOM.appendChild(g);
				if(y>=objArray[i].offsetHeight || x >= objArray[i].offsetWidth) break;
			}
			objArray[i].appendChild(tmpDOM);
			tmpDOM = null;
		}
	}
}

function getGradientObjects() {
	a = document.getElementsByTagName("*");
	objs = new Array();
	for(i=0;i<a.length;i++) {
		c = a[i].className;
		if(c != "") if(c.indexOf("window-base") == 0) objs[objs.length] = a[i];
	} 
	return objs;
}
	
function createColorPath(color1,color2) {
	colorPath = new Array();
	colorPercent = 1.0;
	do {
		colorPath[colorPath.length]=setColorHue(longHexToDec(color1),colorPercent,longHexToDec(color2));
		colorPercent-=.01;
	} while(colorPercent>0);
	return colorPath;
}
		
function setColorHue(originColor,opacityPercent,maskRGB) {
	returnColor=new Array();
	for(w=0;w<originColor.length;w++) returnColor[w] = Math.round(originColor[w]*opacityPercent) + Math.round(maskRGB[w]*(1.0-opacityPercent));
	return returnColor;
}

function longHexToDec(longHex) {
	return new Array(toDec(longHex.substring(0,2)),toDec(longHex.substring(2,4)),toDec(longHex.substring(4,6)));	
}

function toDec(hex) {	
	return parseInt(hex,16);
}
	
function makeGrandParent(obj) {
	disp = document.defaultView.getComputedStyle(obj,'').display;
	disp == "block"?nSpan = document.createElement("div"):	nSpan = document.createElement("span");
	mHTML = obj.innerHTML;
	obj.innerHTML = "";
	nSpan.innerHTML = mHTML;
	nSpan.setAttribute("style","position:relative;z-index:10;");
	obj.appendChild(nSpan);
}
</script>




<STYLE type=text/css>.window-base {
	BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; WIDTH: 400px; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; HEIGHT: 200px; BACKGROUND-COLOR: #ddd
}
.gradient{
	BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; WIDTH: 400px; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; HEIGHT: 200px; BACKGROUND-COLOR: #ddd
}
.window-close {
	FLOAT: right; BACKGROUND-COLOR: #eee
}
.window-min-max {
	FLOAT: right; BACKGROUND-COLOR: #eee
}
.window-move {
	WIDTH: 100%; CURSOR: move; COLOR: #fff; HEIGHT: 30px; BACKGROUND-COLOR: #00d
}
</STYLE>

<img src="a.bmp"/>
<META content="MSHTML 6.00.2900.3395" name=GENERATOR></HEAD>
<BODY>
<DIV style="WIDTH: 100%; HEIGHT: 100%">
<DIV id=couic></DIV>
<DIV class="window-base B8DEFD 4086BD vertical foo">
<DIV class=window-move><BUTTON class=window-close>X</BUTTON><BUTTON 
class=window-min-max>[]</BUTTON> fenetre 1 </DIV>Premiere fenetre ! 
</DIV></DIV>

</DIV></BODY></HTML>

angelus76

5 novembre 2008 à 12:06:37

tu parlle d'essayer de fair sa ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD><TITLE>Fenêtre</TITLE>
<META http-equiv=Content-type content="text/html; charset=utf-8">
<script type="text/javascript">var dragged = null;
<!--
function Open(){
document.getElementById("Windows").style.display = "block";
}
var dX, dY;

function start_drag(objet,event)
{
	if( objet.max) return; //on quitte la fonction
  dragged = objet;
	
	event.returnValue = false;
	if( event.preventDefault ) event.preventDefault();
	
	//Coordonnées de la souris
  var x = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
  var y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
	

	//Coordonnées de l'élément
  var eX = 0;
  var eY = 0;
  var element = objet;
  do
  {
    eX += element.offsetLeft;
    eY += element.offsetTop;
    element = element.offsetParent;
	} while( element && getCssStyleValue(element, 'position') != 'absolute');

	//Calcul du décallage
  dX = x - eX;
  dY = y - eY;



}

function min_max(fenetre)
{
  if( ! fenetre.max )
  {
    fenetre.max = true;
    fenetre.oldTop = fenetre.style.top;
    fenetre.oldLeft = fenetre.style.left;
    fenetre.oldWidth = fenetre.style.width;
    fenetre.oldHeight = fenetre.style.height;
     
    fenetre.style.top = 0;
    fenetre.style.left = 0;
    fenetre.style.width = '100%';
    fenetre.style.height = '100%';
  }
  else
  {
    fenetre.max = false;
    fenetre.style.top = fenetre.oldTop;
    fenetre.style.left = fenetre.oldLeft;
    fenetre.style.width = fenetre.oldWidth;
    fenetre.style.height = fenetre.oldHeight;
  }
}

function close(fenetre)
{
  fenetre.parentNode.removeChild(fenetre);
  //ou: fenetre.style.display = 'none';
}
function drag_onmousemove(event) 
{
  if( dragged ) 
  {
    var x = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
    var y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
		
		//On applique le décalage
		x -= dX;
		y -= dY;

    dragged.style.position = 'absolute';
    dragged.style.left = x + 'px';
    dragged.style.top = y + 'px';
  }
}

function drag_onmouseup(event) 
{
  dragged = null; //On arrête le drag&drop
}

function addEvent(obj,event,fct)
{
  if( obj.attachEvent)
     obj.attachEvent('on' + event,fct);
  else
     obj.addEventListener(event,fct,true);
}

function getCssStyleValue(element /*element html*/, style/*style recherché*/)
{
  if( element.currentStyle )
  {
    return element.currentStyle[style];
  }
  else
  {
    return window.getComputedStyle(element,null).getPropertyValue(style);
  }
}

function drag_onmousedown (event)
{
  var target = event.target || event.srcElement;
  
  //On commence par trouver la fenêtre elle-même
  var fenetre = target;
  while( fenetre)
  {
    if( fenetre.className && fenetre.className.match(/\bwindow-base\b/g) )
    {
       break; //On arrête la boucle
    }
		fenetre = fenetre.parentNode;
  }
  if( !fenetre) //Si on est sorti de la boucle mais qu'on a trouvé aucune fenêtre, on abandonne
    return;

  //Maintenant, on part à la recherche d'un bouton déclencheur
  var element = target;
  while(element)
  {
    if( element.className)
    {
      if( element.className.match(/\bwindow-close\b/g))
      {
        close(fenetre);
        break;
      }
      else if( element.className.match(/\bwindow-min-max\b/g) )
      {
        min_max(fenetre);
        break;
			}
      else if( element.className.match(/\bwindow-move\b/g) )
      {
        start_drag(fenetre, event);
        break;
      }
    }
		element = element.parentNode;
  }

	//Mettre au premier plan
	var elements = document.getElementsByTagName('*'); //On récupère tous les éléments de la page
	var zIndex = 0;
	for( var i=0; i < elements.length; i++)
	{
					zIndex = Math.max(zIndex,elements[i].style.zIndex);
	}
	fenetre.style.zIndex = zIndex + 1; //toujours plus haut que le plus haut 

}
addEvent(document,'mousedown',drag_onmousedown);
addEvent(document,'mousemove',drag_onmousemove);
addEvent(document,'mouseup',drag_onmouseup);


-->
</script>
<script type="text/javascript">window.addEventListener?window.addEventListener("load",createGradient,false):window.attachEvent("onload",createGradient);

function createGradient() {
	if(!document.getElementById)return;
	
	objArray = getGradientObjects();
	if(!objArray.length) return;
	
	for(i=0;i<objArray.length;i++) {
		params = objArray[i].className.split(" ");
		if(document.all && !window.opera) {
			objArray[i].style.width = objArray[i].offsetWidth + "px";
			params[3] == "horizontal"?gType = 1:gType = 0;
			objArray[i].style.filter = "progid:DXImageTransform.Microsoft.Gradient(GradientType="+gType+",StartColorStr=\"#" + params[1] + "\",EndColorStr=\"#" + params[2] + "\")";
	} else {
			colorArray = createColorPath(params[1],params[2]);
			x=0;y=0;
			if(params[3] == "horizontal") {
				w=Math.round(objArray[i].offsetWidth/colorArray.length);
				if(!w)w=1;
				h = objArray[i].offsetHeight;
			} else {
				h = Math.round(objArray[i].offsetHeight/colorArray.length);
				if(!h) h =1;
				w = objArray[i].offsetWidth;
			}
			makeGrandParent(objArray[i]);
			tmpDOM = document.createDocumentFragment();
			for(p=0;p<colorArray.length;p++) {
				g = document.createElement("div");
				g.setAttribute("style","position:absolute;z-index:0;top:" + y + "px;left:" + x + "px;height:" + h + "px;width:" + w + "px;background-color:rgb(" + colorArray[p][0] + "," + colorArray[p][1] + "," + colorArray[p][2] + ");");
				params[3] == "horizontal"?x+=w:y+=h;
				tmpDOM.appendChild(g);
				if(y>=objArray[i].offsetHeight || x >= objArray[i].offsetWidth) break;
			}
			objArray[i].appendChild(tmpDOM);
			tmpDOM = null;
		}
	}
}

function getGradientObjects() {
	a = document.getElementsByTagName("*");
	objs = new Array();
	for(i=0;i<a.length;i++) {
		c = a[i].className;
		if(c != "") if(c.indexOf("window-base") == 0) objs[objs.length] = a[i];
	} 
	return objs;
}
	
function createColorPath(color1,color2) {
	colorPath = new Array();
	colorPercent = 1.0;
	do {
		colorPath[colorPath.length]=setColorHue(longHexToDec(color1),colorPercent,longHexToDec(color2));
		colorPercent-=.01;
	} while(colorPercent>0);
	return colorPath;
}
		
function setColorHue(originColor,opacityPercent,maskRGB) {
	returnColor=new Array();
	for(w=0;w<originColor.length;w++) returnColor[w] = Math.round(originColor[w]*opacityPercent) + Math.round(maskRGB[w]*(1.0-opacityPercent));
	return returnColor;
}

function longHexToDec(longHex) {
	return new Array(toDec(longHex.substring(0,2)),toDec(longHex.substring(2,4)),toDec(longHex.substring(4,6)));	
}

function toDec(hex) {	
	return parseInt(hex,16);
}
	
function makeGrandParent(obj) {
	disp = document.defaultView.getComputedStyle(obj,'').display;
	disp == "block"?nSpan = document.createElement("div"):	nSpan = document.createElement("span");
	mHTML = obj.innerHTML;
	obj.innerHTML = "";
	nSpan.innerHTML = mHTML;
	nSpan.setAttribute("style","position:relative;z-index:10;");
	obj.appendChild(nSpan);
}
</script>




<STYLE type=text/css>.window-base {
	BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; WIDTH: 400px; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; HEIGHT: 200px; BACKGROUND-COLOR: #ddd
}
.gradient{
	BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; WIDTH: 400px; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; HEIGHT: 200px; BACKGROUND-COLOR: #ddd
}
.window-close {
	FLOAT: right; BACKGROUND-COLOR: #eee
}
.window-min-max {
	FLOAT: right; BACKGROUND-COLOR: #eee
}
.window-move {
	WIDTH: 100%; CURSOR: move; COLOR: #fff; HEIGHT: 30px; BACKGROUND-COLOR: #00d
}
</STYLE>


<META content="MSHTML 6.00.2900.3395" name=GENERATOR></HEAD>
<BODY>
<img src="a.bmp" onclick="Open();"/>
<div id="Windows" style="display:none;">
<DIV style="WIDTH: 100%; HEIGHT: 100%">
<DIV id=couic></DIV>
<DIV class="window-base B8DEFD 4086BD vertical foo">
<DIV class=window-move><BUTTON class=window-close>X</BUTTON><BUTTON 
class=window-min-max>[]</BUTTON> fenetre 1 </DIV>Premiere fenetre ! 
</DIV></DIV>
</div>
</DIV></BODY></HTML>

comme tu peux le remarquer j'ais juste cree un nouveau div nommé " Windows " sur le quelle j'ais appliquer un style ( dispaly:none ) qui revien a dire qu'il serras invisible

sur l'image j'ais fait un onclick qui l'orsque l'ont click sur l'image , execute la fonction ( Open() )
cette fonction Open(); ce content de mettre le style de ma div " Windows " en ( display:block ) c'est a dir Visible.

superpl

5 novembre 2008 à 16:11:16

1- pour le <input type ... , le problème était la fonction. Cela revenait un peu a faire un onclick, ce qui ne résolvait pas mon problème...

2- pour le style invisible, c'est SUPER, mais il reste à modifié la fonction close(), car quand on ferme, on ferme pour de bon. je ne comprends pas : j'ai essayé de mettre le style "display" en "none" (et d'ailleurs je crois que c'était déjà comme ça mais que je l'ai fait autrement) mais ca ne marche pas, quand on réappui sur le bouton, le style ne revient plus en "block" !!! pourquoi ??

angelus76

5 novembre 2008 à 19:08:31

en modifiant la fonction close comme suite

function close(fenetre)
{
  //fenetre.parentNode.removeChild(fenetre);
  //fenetre.style.display = 'none';
document.getElementById("Windows").style.display = "none";
}

sa fonctione.
je pensse qu'a la base sa detrousé completement les element de la fenetre flotante
mtn on agie uniquement sur le div " Windows "