BOITE DE DIALOGUE DE VALIDATION MODAL modale, dom, validation, boite, Source N°38650

Information sur la source

Catégorie :Formulaire Classé sous : modale, dom, validation, boite Niveau : Débutant Date de création : 17/07/2006 Vu : 6 358

Auteur : mickaelpfr

Ecrire un message privé

Note :

10,00 / 10

1
2
3
4
5
6
7
8
9
10

Commentaire sur cette source (9)

Ajouter un commentaire et/ou une note

Description

Voici une boite personnalisé, qui émule la "modalité" explication :

-- Appel de la boite de dialogue demandant à un utilisateur une question qu'il doit valider par "oui" ou "non" , le reste du site devient inaccéssible, tant qu'il n'a pas validé.

-- Personalisation du titre de la boite , du texte souhaité , du texte des deux boutons, des couleurs...

gestion des styles par css
uniquement un appel a la fonction a faire , car les éléments sont créers par le DOM.

en espérant que cela soit utile :)

Source

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Boite de validation modale</title>
<style type="text/css">
.titreBoite{
display:block;
border-bottom:1px solid #ccc;
background-color:#FF0000;
}
.boite{
width:350px;
height:200px;
border:1px solid #ccc;
background-color:#999999;
position:absolute;
top:50%;
margin-top:-100px;
left:50%;
margin-left:-175px;
z-index:5001;
}
.btn1{
position:absolute;
left:10px;
top:150px;
}
.btn2{
position:absolute;
right:10px;
top:150px;
}
.question{
display:block;
width:90%;
margin-left:auto;
margin-right:auto;
margin-top:15px;
}
.boiteModal{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background-color:#FFFF00;
z-index:5000;
}
</style>
<script type="text/javascript">
function boiteChoix(titre,titreBouton1,titreBouton2,texteQuestion){
//#### PARTIE CONCERNANT LE TITRE DE LA BOITE ####//
var titreBoite = titre;
//On ajoute un élément de type span
var newTitre = document.createElement('span');
//On affecte le style "sélectionné" au titre qui viens d'etre inséré
newTitre.setAttribute("class","titreBoite");
//définition du style pour ie
newTitre.setAttribute("className","titreBoite");
newTitre.innerHTML = titreBoite;
//#### AJOUT DES 2 BOUTONS AVEC LEUR LABEL ####//
var titreBtn1 = titreBouton1;
//On ajoute un élément de type span
var newBtn = document.createElement('button');
//On affecte le style "sélectionné" au titre qui viens d'etre inséré
newBtn.setAttribute("class","btn1");
//définition du style pour ie
newBtn.setAttribute("className","btn1");
newBtn.setAttribute("value",titreBtn1);
newBtn.setAttribute("onclick","recupEtat(true);");
//Définition de l'action pour ie
newBtn.onclick = function recupEtat(){var elementASupp = document.getElementById('boiteChoix');document.body.removeChild(elementASupp);elementASupp = document.getElementById('boiteModal');document.body.removeChild(elementASupp);return true;};
newBtn.innerHTML = titreBtn1;
//## bouton 2 ##//
var titreBtn2 = titreBouton2;
//On ajoute un élément de type span
var newBtn2 = document.createElement('button');
//On affecte le style "sélectionné" au titre qui viens d'etre inséré
newBtn2.setAttribute("class","btn2");
//définition du style pour ie
newBtn2.setAttribute("className","btn2");
newBtn2.setAttribute("value",titreBtn2);
newBtn2.setAttribute("onclick","recupEtat(false);");
//Définition de l'action pour ie
newBtn2.onclick = function recupEtat(){var elementASupp = document.getElementById('boiteChoix');document.body.removeChild(elementASupp);elementASupp = document.getElementById('boiteModal');document.body.removeChild(elementASupp);return false;};
newBtn2.innerHTML = titreBtn2;
//#### LE TEXTE DE LA QUESTION ####//
var texteQuestion = texteQuestion;
//On ajoute un élément de type span
var newQuestion = document.createElement('span');
//On affecte le style "sélectionné" au titre qui viens d'etre inséré
newQuestion.setAttribute("class","question");
//définition du style pour ie
newQuestion.setAttribute("className","question");
newQuestion.innerHTML = texteQuestion;
//#### AJOUT D'UN DIV POUR SIMULER LA MODALITE DE LA BOITE ####//
var newBoiteModal = document.createElement('div');
//On affecte un attribut de type id, auquel on met l'attribut fixe : "boiteChoix"
newBoiteModal.setAttribute("id","boiteModal");
newBoiteModal.setAttribute("style","width:"+(screen.width-50)+"px;height:"+(screen.height-300)+"px;position:absolute;top:0px;left:0px;z-index:5000;background-color:#FFFF00;opacity:0;");
//définition du style pour ie
if (document.all) {
newBoiteModal.style.setAttribute("cssText","width:"+(screen.width-50) +"px;height:"+(screen.height-250)+"px;position:absolute;top:0px;left:0px;z-index:5000;background-color:#FFFF00;filter: alpha(opacity=0)");
alert(screen.width+" et "+screen.height)
}
//#### PARTIE CONCERNANT LA BOITE ####//
//On ajoute un élément de type div
var newBoite = document.createElement('div');
//On affecte un attribut de type id, auquel on met l'attribut fixe : "boiteChoix"
newBoite.setAttribute("id","boiteChoix");
//On affecte le style "sélectionné" au titre qui viens d'etre inséré
newBoite.setAttribute("class","boite");
//définition du style pour ie
newBoite.setAttribute("className","boite")
//On créer la boite modal dans la page
document.body.appendChild(newBoiteModal);
//on créer la boite dans la page
document.body.appendChild(newBoite);
//monMenu.appendChild(newTitre);
newBoite.appendChild(newTitre);
newBoite.appendChild(newQuestion);
newBoite.appendChild(newBtn);
newBoite.appendChild(newBtn2);
}
function recupEtat(etat){
var elementASupp = document.getElementById('boite');
document.body.removeChild(elementASupp);
elementASupp = document.getElementById('boiteModal');
document.body.removeChild(elementASupp);
return etat;
}
</script>
</head>
<body>
<input type="button" value="Ajouter une boite" onclick="boiteChoix('test de titre','Accepter','Refuser','Texte pour la question');" />
</body>
</html>

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Boite de validation modale</title>
<style type="text/css">
	.titreBoite{
		display:block;
		border-bottom:1px solid #ccc;
		background-color:#FF0000;
	}
	.boite{
		width:350px;
		height:200px;
		border:1px solid #ccc;
		background-color:#999999;
		position:absolute;
		top:50%;
		margin-top:-100px;
		left:50%;
		margin-left:-175px;
		z-index:5001;
	}
	.btn1{
		position:absolute;
		left:10px;
		top:150px;
	}
	.btn2{
		position:absolute;
		right:10px;
		top:150px;
	}
	.question{
		display:block;
		width:90%;
		margin-left:auto;
		margin-right:auto;
		margin-top:15px;
	}
	.boiteModal{
		position:absolute;
		left:0px;
		top:0px;
		width:100%;
		height:100%;
		background-color:#FFFF00;
		z-index:5000;
	}
</style>
<script type="text/javascript">
function boiteChoix(titre,titreBouton1,titreBouton2,texteQuestion){
			//#### PARTIE CONCERNANT LE TITRE DE LA BOITE ####//
			var titreBoite = titre;
			//On ajoute un élément de type span
			var newTitre = document.createElement('span');
			//On affecte le style "sélectionné" au titre qui viens d'etre inséré
			newTitre.setAttribute("class","titreBoite");
			//définition du style pour ie
			newTitre.setAttribute("className","titreBoite");
			newTitre.innerHTML = titreBoite;
			
			//#### AJOUT DES 2 BOUTONS AVEC LEUR LABEL ####//
			var titreBtn1 = titreBouton1;
			//On ajoute un élément de type span
			var newBtn = document.createElement('button');
			//On affecte le style "sélectionné" au titre qui viens d'etre inséré
			newBtn.setAttribute("class","btn1");
			//définition du style pour ie
			newBtn.setAttribute("className","btn1");
			newBtn.setAttribute("value",titreBtn1);
			newBtn.setAttribute("onclick","recupEtat(true);");
			//Définition de l'action pour ie
			newBtn.onclick = function recupEtat(){var elementASupp = document.getElementById('boiteChoix');document.body.removeChild(elementASupp);elementASupp = document.getElementById('boiteModal');document.body.removeChild(elementASupp);return true;};
			newBtn.innerHTML = titreBtn1;
			//## bouton 2 ##//
			var titreBtn2 = titreBouton2;
			//On ajoute un élément de type span
			var newBtn2 = document.createElement('button');
			//On affecte le style "sélectionné" au titre qui viens d'etre inséré
			newBtn2.setAttribute("class","btn2");
			//définition du style pour ie
			newBtn2.setAttribute("className","btn2");
			newBtn2.setAttribute("value",titreBtn2);
			newBtn2.setAttribute("onclick","recupEtat(false);");
			//Définition de l'action pour ie
			newBtn2.onclick = function recupEtat(){var elementASupp = document.getElementById('boiteChoix');document.body.removeChild(elementASupp);elementASupp = document.getElementById('boiteModal');document.body.removeChild(elementASupp);return false;};
			newBtn2.innerHTML = titreBtn2;
			
			//#### LE TEXTE DE LA QUESTION ####//
			var texteQuestion = texteQuestion;
			//On ajoute un élément de type span
			var newQuestion = document.createElement('span');
			//On affecte le style "sélectionné" au titre qui viens d'etre inséré
			newQuestion.setAttribute("class","question");
			//définition du style pour ie
			newQuestion.setAttribute("className","question");
			newQuestion.innerHTML = texteQuestion;
			
			//#### AJOUT D'UN DIV POUR SIMULER LA MODALITE DE LA BOITE ####//
			var newBoiteModal = document.createElement('div');
			//On affecte un attribut de type id, auquel on met l'attribut fixe : "boiteChoix"
			newBoiteModal.setAttribute("id","boiteModal");
			newBoiteModal.setAttribute("style","width:"+(screen.width-50)+"px;height:"+(screen.height-300)+"px;position:absolute;top:0px;left:0px;z-index:5000;background-color:#FFFF00;opacity:0;");
			//définition du style pour ie
			if (document.all) { 
			newBoiteModal.style.setAttribute("cssText","width:"+(screen.width-50) +"px;height:"+(screen.height-250)+"px;position:absolute;top:0px;left:0px;z-index:5000;background-color:#FFFF00;filter: alpha(opacity=0)");
			alert(screen.width+" et "+screen.height)
			}
			//#### PARTIE CONCERNANT LA BOITE ####//
			//On ajoute un élément de type div
			var newBoite = document.createElement('div');
			//On affecte un attribut de type id, auquel on met l'attribut fixe : "boiteChoix"
			newBoite.setAttribute("id","boiteChoix");
			//On affecte le style "sélectionné" au titre qui viens d'etre inséré
			newBoite.setAttribute("class","boite");
			//définition du style pour ie
			newBoite.setAttribute("className","boite")
			//On créer la boite modal dans la page
			document.body.appendChild(newBoiteModal);
			//on créer la boite dans la page
			document.body.appendChild(newBoite);
			//monMenu.appendChild(newTitre);
			newBoite.appendChild(newTitre);
			newBoite.appendChild(newQuestion);
			newBoite.appendChild(newBtn);
			newBoite.appendChild(newBtn2);
}
function recupEtat(etat){
	var elementASupp = document.getElementById('boite');
	document.body.removeChild(elementASupp);
	elementASupp = document.getElementById('boiteModal');
	document.body.removeChild(elementASupp);
	return etat;
}
</script>
</head>

<body>
<input type="button"  value="Ajouter une boite" onclick="boiteChoix('test de titre','Accepter','Refuser','Texte pour la question');" />
</body>
</html>

Sources du même auteur

Toutes les sources de mickaelpfr

Sources de la même categorie

Toutes les sources de la catégorie Formulaire

Sources en rapport avec celle ci

Commentaires

Commentaire de SpOrTiF le 21/03/2007 16:42:48

Tres bien! Felicitation!

sportif
Commentaire de Zeroc00l le 05/04/2007 13:52:22

Une capture serait pas mal !
Commentaire de mickaelpfr le 05/04/2007 15:10:29

hum il s'agit juste d'une boite de dialogue sans images, donc il n'y a pas d'intérèt a mettre un screenshot d'une boite avec 2 boutons : "valider" / "refuser" ... :)
Bonne journée
Commentaire de Zeroc00l le 05/04/2007 21:37:25

Alors enleve "personnalisé" de la description
Sinon elle le setaient toute et donc l'adjectif ne servirait a rien ^^!
Commentaire de mickaelpfr le 06/04/2007 08:34:32

... j'ai un long moment de solitude la lol

Personnalisable alors : la couleur de fond / image , position / taille est gérable via un css :) ( ce qui selon moi offre plus de possibilité que de passer une liste d'options à la fonction ;-)
Voila pourquoi personalisable et non personnalisé , toute mes excuses :)
Commentaire de guixyz le 03/07/2007 11:09:33

très sympathique ta boite de dialogue,
juste question pour les nulles :
comment on fait pour récupérer le résultat via la fonction que tu as créé (recupEtat())? c'est juste le seul exemple qui manque dans ton explication.
merci ++
Commentaire de sosboite le 17/10/2007 16:28:23

tres pratique ta boite de dialogue mais il y a un probleme sous IE , les balise <select> reste accessible
A tu rencontré le problème

Merci
Commentaire de devTrunk le 07/12/2007 11:38:49

SOSBOITE, je te suggère de masquer les selects par une fonction lors de l'affichage de la boite personnalisABLE ^^ (visibility='false'). Il s'agit d'un bug irrémédiable d'IE et seuls des astuces et contournements peuvent résoudre ce problème : Les divs ne peuvent paw masquer les <select>. Voilà.
Commentaire de mickaelpfr le 07/12/2007 13:55:58

Effectivement , les listes déroulantes ( select ) restent malheureusement accèssible pour gèrer cela il suffit de modifier la fonction comme ceci :

function masquerSelect(Etat){
var visibilite = (Etat) ? "hidden":"visible";
var listeSelect = document.getElementsByTagName('select');
var nbSelect = listeSelect.length;
for(var i = 0; i < nbSelect ; i++){
listeSelect[i].style.visibility = visibilite;
}
}

fonction à appeler au début de la méthode boiteChoix() ( première ligne par exemple )
avec comme paramètre : masquerSelect(true);

puis également dans la méthode recupEtat() a la première ligne :
masquerSelect(false);

@++ et merci encore à tous pour vos commentaire :)

Ajouter un commentaire

Discussions en rapport avec ce code source

Validation automatique Boite confirm() par marsbidon

Probelem au niveau des DOM en ajax par palazar

Iniber le menu du nav sur click-droit par sebseb42

Iframe et DOM par xordonez

Savoir si on a appuyé sur la croix de la fenetre modale? par vinzemuls

dom par Yahaaaaaa

Une boite flotante capricieuse par Nathbest

Amélioration d'une boite flotante... par Nathbest

DOM, id et position par Teclis01

DOM par PROTECTIONNISTE