[Gestion de fenêtre avec Javascript] Fermer une fenêtre par Arsleust - page 1

Je n'y arrive pas !

Je vais vous donnez les codes :

fenetre.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
        <head>
                <title>Gestions de fenêtres en JavaScript</title>
                <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
                        <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
						<script type="text/javascript" src="fenetres.js"></script>
        </head>
        <body onmousemove="deplacer_fenetre(event)">
			
			
			<p>
				
				<input type="button" value="Fenêtre 1" onclick="alerter()" />
				
			</p>
			
			
        </body>
</html>

fenetres.js

// Les variables globales
var zindex=0;
var fenetre_deplacee_difx=0;
var fenetre_deplacee_dify=0;


// Fonction d'ajout d'évenements
function addEvent(obj,event,fct){
    if(obj.attachEvent)
    obj.attachEvent('on' + event,fct);
    else
    obj.addEventListener(event,fct,true);
}
// Création d'une fenêtre
function creer_fenetre(left,top,width,height,nbid_fen,text)
{
		var fenetre = document.createElement("div"); //Création du bloc principal
		fenetre.setAttribute("id","" + nbid_fen + ""); //Ici, on donne pour id  'nbid_fen'  à notre élément
        fenetre.className="fenetre"; //On donne un attribut class à cette div
        fenetre.style.left=left+'px';
        fenetre.style.top=top+'px';
        fenetre.style.width=width+'px';
        fenetre.style.height=height+'px';
        if(document.all) fenetre.attachEvent("onmousedown",function (){premier_plan(fenetre)}); //Pour IE
        else fenetre.addEventListener("mousedown",function (){premier_plan(fenetre)},true); //Pour les autres
       
		//On les rajoute à la div "haut", donc juste après l'avoir créé
		var haut = document.createElement("div");
		haut.className="haut";
		
        //On créé ensuite les trois div qui seront dedans:
        var haut_gauche = document.createElement("div");
        haut_gauche.className="haut_gauche";
        var haut_droite = document.createElement("div");
        haut_droite.className="haut_droite";
		var haut_centre = document.createElement("div");
        haut_centre.className="haut_centre";
		
		addEvent(haut_centre,"mousedown",function (event){commencer_deplacement(event,fenetre)});
		addEvent(haut_centre,"mouseup",arreter_deplacement);
		addEvent(haut_gauche,"mousedown",function (event){commencer_deplacement(event,fenetre)});
		addEvent(haut_gauche,"mouseup",arreter_deplacement);
		
		
        //Puis on les insère une par une dans notre bloc "haut":
        haut.appendChild(haut_gauche);
        haut.appendChild(haut_droite);
        haut.appendChild(haut_centre);
        //On insère le tout (la div "haut" et les trois div à l'intérieur) dans le bloc "fenetre":
        fenetre.appendChild(haut);
       
        //On fait de même pour la div "milieu"
        var milieu = document.createElement("div");
        milieu.className="milieu";
        var milieu_gauche = document.createElement("div");
        milieu_gauche.className="milieu_gauche";
        var milieu_droite = document.createElement("div");
        milieu_droite.className="milieu_droite";
        var milieu_centre = document.createElement("div");
		// Insertion de texte
		var texte_a_ecrire = document.createTextNode(text); //Ici on a créé un texte
		milieu_centre.appendChild(texte_a_ecrire);
		
        
		milieu_centre.className="milieu_centre";
        milieu.appendChild(milieu_gauche);
        milieu.appendChild(milieu_droite);
		milieu.appendChild(milieu_centre);
        fenetre.appendChild(milieu);
		
		
        //On fait de même pour la div "bas
        var bas = document.createElement("div");
        bas.className="bas";
        var bas_gauche = document.createElement("div");
        bas_gauche.className="bas_gauche";
        var bas_droite = document.createElement("div");
        bas_droite.className="bas_droite";
        var bas_centre = document.createElement("div");
        bas_centre.className="bas_centre";
        bas.appendChild(bas_gauche);
        bas.appendChild(bas_droite);
        bas.appendChild(bas_centre);
        fenetre.appendChild(bas);

        premier_plan(fenetre); //On met au premier plan notre fenêtre
        document.body.appendChild(fenetre);
}
function alerter(cause)
{
		creer_fenetre(200,200,100,100,1,"Alert !");
}

// Mise au premier plan
function premier_plan(fenetre) {
        zindex++; //On incrémente la variable globale
        fenetre.style.zIndex=zindex; //On affecte sa valeur au z-index de la fenêtre concernée
}
// Déplacement des fenêtres
function getPosition(e){
        var left = 0;
        var top  = 0;
        while (e.offsetParent){
                left += e.offsetLeft;
                top  += e.offsetTop;
                e     = e.offsetParent;
        }
        left += e.offsetLeft;
        top  += e.offsetTop;
        return {x:left, y:top};
}
function commencer_deplacement(ev,fenetre) {
        fenetre_deplacee=fenetre; //On définit quelle fenêtre est en cours de déplacement
        old_mouseCoords=mouseCoords(ev); //On récupère la position de la souris
        old_windowCoords=getPosition(fenetre); //Et la position de notre fenêtre
        //On stocke les différences dans les variables globales
        fenetre_deplacee_difx=old_mouseCoords.x-old_windowCoords.x;
        fenetre_deplacee_dify=old_mouseCoords.y-old_windowCoords.y;
}

function arreter_deplacement() {
        fenetre_deplacee=0; //La variable vaut 0
}

function mouseCoords(ev){
        if(ev.pageX || ev.pageY){
                return {x:ev.pageX, y:ev.pageY};
        }
        return {
                x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                y:ev.clientY + document.body.scrollTop  - document.body.clientTop
        };
}
function deplacer_fenetre(ev) {
        if(fenetre_deplacee!=0) {
                var souris=mouseCoords(ev);
                fenetre_deplacee.style.left=(souris.x-fenetre_deplacee_difx)+'px'; //On soustrait l'abscisse du curseur par rapport au coin gauche de la fenêtre
                fenetre_deplacee.style.top=(souris.y-fenetre_deplacee_dify)+'px'; //On fait de même avec l'ordonnée
        }
}

style.css

body
{
   width: 800px;
   margin: auto; 																				
   background-image: url("img/design/fond.png"); 
}
#conteneur {
	width: 852px;
	background-image: url(img/design/conteneur.png);
	background-repeat:repeat-y;
	padding-left:10px;
	min-height: 100%;
	position: relative;
}
#connection {
	border: 3px solid black;
	height:23px;
	text-align: center;
	background-color: black;
	color: white;
	margin-left:20px;
	margin-right:40px;
}

#en_tete {
	margin-top:20px;
	margin-left: 200px;
   width: 451px;
   height: 161px;
   background-image : url("img/design/header.jpg");
}
#menu
{ 
	margin-left:1px;
	width: 831px;
    height: 20px;
	background-color: #CCCCCC;
	font-size: 14px;
	margin-top: 40px;
	font-weight: bold;
	
}
#menu a{
text-decoration: none;
color: white;
}

#corps {
  padding-left:10px;
  padding-right:20px;
}
h1
{
	margin: 10px;
	margin-bottom: 10px;
   	background-image: url("img/design/puce.png");
   	background-repeat: no-repeat;
   	padding-left: 35px;
	padding-right: 10px;
   	text-align: left;
   	font-size: 16pt;
   	font-family: "Arial Black", "Times New Roman", Times, serif;
   	font-weight: bold;
}
#corps a {
text-decoration: none;
}
#corps a:visited
{
color: blue;
}

table {
border-collapse: collapse;
border: 1px;
}

img{border:0px;}
#footer {
margin-left:1px;
margin-right:20px;
height: 100px;
background-color: #CCCCCC;
font-size: 14px;
margin-top: 40px;
}
label {
	display:block;
	width:150px;
	float:left;
}

/* Style des fenêtres */
.fenetre {
        position: absolute; /*On place notre fenêtre en position absolute car celle ci pourra être bougée*/
}
.haut {
        height: 28px; /*Ici on indique que le haut fera 28px de longueur, vous pouvez changer cela si votre fenêtre a un design différent*/
}
.milieu {
        height: 100%; /*Ici on dit au milieu de prendre toute la longueur possible*/
}
.bas {
        height: 8px; /*Ici on indique la taille du bas, comme pour le haut*/
}
.haut_gauche {
        width: 8px; /*On indique la largeur du coin haut gauche*/
        height: 100%; /*On lui indique de prendre toute la longueur possible.*/
        background-image: url(images/haut_gauche.png);
        float: left; /*On le positionne à gauche*/
}
.haut_droite { /*On fait de même avec le coin haut droit*/
        width: 8px;
        height: 100%;
        background-image: url(images/haut_droite.png);
        float: right;
}
.haut_centre {
        height:100%;
        margin-left: 8px; /*On fait cela pour pas que le centre se retrouve sous les coins*/
        margin-right: 8px;
        background-image: url(images/haut_centre.png);
}

.milieu_gauche { /*On repete les mêmes opérations pour les autres divs*/
        width: 8px;
        height: 100%;
        background-image: url(images/milieux_gauche.png);
        float: left;
}
.milieu_droite {
        width: 8px;
        height: 100%;
        background-image: url(images/milieux_droite.png);
        float: right;
}
.milieu_centre {
        height: 100%;
        background-color: #ffffff;
        margin-left: 8px;
        margin-right: 8px;
        text-align: center;
		color : black;
}

.bas_gauche {
        width: 8px;
        height: 100%;
        background-image: url(images/bas_gauche.png);
        float: left;
}
.bas_droite {
        width: 8px;
        height: 100%;
        background-image: url(images/bas_droite.png);
        float: right;
}
.bas_centre {
        height: 100%;
        background-image: url(images/bas_centre.png);
        margin-left: 8px;
        margin-right: 8px;
}

Arsleust

11 novembre 2008 à 10:10:51

Bonjour.

Aujourd'hui, j'ai lu ce tuto, très intéressant et bien fait.

Le problème, c'est que l'on ne dit pas comment fermer une fenêtre.
J'ai essayer plusieurs chose, ça ne fonctionne pas.

Aidez-moi, s'il vous plait ! :'(

Merci d'avance pour vos réponse,

ARCEUS02

</span></span></span></span>

Elias le Vert

11 novembre 2008 à 10:33:12

Je n'ai pas lu le tuto, mais a priori je dirais : en utilisant document.removeChild() sur le noeud à supprimer.

11 novembre 2008 à 10:53:59

Merci.

Mais ça ne marche pas...

Si quelqu'un d'autre à une réponse, merci de l'envoyer. :-°

Merwin

11 novembre 2008 à 11:51:36

Pour utiliser removeChild()
C'est assez compliqué est "bête" en fait.
Exemple :

var node = document.getElementById('myNodyToDelete');
node.parentNode.removeChid(node);//Le parentNode est hyper importantpeut-être un peu énervant aussi.

Personnellement je suis très feignant et sur certain script je préfére implanté une méthode remove (qui ne marche pas sous Internet Explorer évidement)

11 novembre 2008 à 13:05:37

12 novembre 2008 à 7:05:15

Alors ?

Jeff94

12 novembre 2008 à 11:48:19

function close(fenetre)
{
if(confirm('Voulez vous fermer la fenetre?'))
{
fenetre.parentNode.removeChild(fenetre);
}

13 novembre 2008 à 12:47:25

Mais pourrais-tu l'inclure au script ? :-°

Cela ne fonctionne pas ... :'(

13 novembre 2008 à 19:02:51

un { de trop... et vérifie si le node n'est pas nul.

14 novembre 2008 à 7:45:45

Il veux bien me demander "supprimer la fenetre ?" mais pas la supprimer...

14 novembre 2008 à 17:58:08

Tu a créer ta variable "fenêtre" :

var fenetre = document.createElement("div");

Dans une fonction "creer_fenetre".

Cette variable est locale donc elle n'est pas accessible par les autres fonctions or je l'utilise dans la fonction pour supprimer la fenêtre, la solution c'est soit tu la fait passer en argument, soit tu fais une variable globale. Dans le deux cas je ne me rappelle plus comment il faut faire, j'edite le message quand j'aurais fait une recherche.

14 novembre 2008 à 18:26:56

Merci !

17 novembre 2008 à 16:17:33

18 novembre 2008 à 11:51:15

siko

19 novembre 2008 à 18:50:27

Suffit de rajouter globale devant me semble bien nom ?
Enfin si ca marche comme en php c'est cela.

24 novembre 2008 à 16:25:48

Le problème, c'est après un bogue : il m'affiche 1 fenêtres, je quitte, 2 fenêtres, je quitte, 3 fenêtres, je quitte, 4 fenêtres, je quitte, 5 fenêtres, ainsi de suite...

Zetny