1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Boite de dialogue de validation modal

Boite de dialogue de validation modal

Soyez le premier à donner votre avis sur cette source.

Snippet vu 13 039 fois - Téléchargée 24 fois

Commenter

Contenu du snippet

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 / Exemple : 


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

A voir également

Ajouter un commentaire Commentaires
Signaler
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
 2
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 :)
Signaler
Messages postés
1
Date d'inscription
vendredi 7 décembre 2007
Statut
Membre
Dernière intervention
7 décembre 2007
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à.
Signaler
Messages postés
1
Date d'inscription
mercredi 17 octobre 2007
Statut
Membre
Dernière intervention
17 octobre 2007
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
Signaler
Messages postés
7
Date d'inscription
lundi 14 avril 2003
Statut
Membre
Dernière intervention
3 juillet 2007
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 ++
Signaler
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
 2
... 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 :)
Afficher les 9 commentaires
S'inscrire maintenant

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.

Du même auteur (mickaelpfr)