Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

BOITE DE DIALOGUE DE VALIDATION MODAL


Information sur la source

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

Note :
10 / 10 - par 1 personne
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>

Commentaires et avis

signaler à un administrateur
Commentaire de SpOrTiF le 21/03/2007 16:42:48

Tres bien! Felicitation!

sportif

signaler à un administrateur
Commentaire de Zeroc00l le 05/04/2007 13:52:22

Une capture serait pas mal !

signaler à un administrateur
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

signaler à un administrateur
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 ^^!

signaler à un administrateur
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 :)

signaler à un administrateur
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 ++

signaler à un administrateur
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

signaler à un administrateur
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à.

signaler à un administrateur
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 dans le forum

Validation automatique Boite confirm() [ par marsbidon ] Bonjour, Je ne sais comment faire pour qu'une boite de dialogue de type confirm() soit validée automatiquement au bout d'un certain temps. Je veux lan Probelem au niveau des DOM en ajax [ par palazar ] Bonjour je developpe une pop up ajax qui apparait via un calendrierQd je souhaite ouvrir une nouvelle popup  relative à une nouvelle date  par dessus Iniber le menu du nav sur click-droit [ par sebseb42 ] Bonjour à tous,Ma question peut paraitre anodine comme ça, mais ce que j'ai besoin de faire, c'est d'iniber l'appartition du fameux menu contextuel da Iframe et DOM [ par xordonez ] Bonjour, je rencontre le problème suivant: La page de mon appli est un frameset composé de 3 frames: top, middle et bottom. Le corps de la page est Savoir si on a appuyé sur la croix de la fenetre modale? [ par vinzemuls ] Bonjour,Voilà j'aimerai savoir si l'utilisateur a appuyé sur un bouton ANNULER ou la croix de ma fenetre modalej'ai une page default.aspx ou jappel ma dom [ par Yahaaaaaa ] bjrs jaimerai avoir del'aide sur le dom(javascript) mon but et de prendre en selection un text ou une image et davoir son path ,je veu dir que jai le Une boite flotante capricieuse [ par Nathbest ] Bonjour à tous, alors voici mon problème:J'ai un système de boite flotante qui s'affiche à moitié caché sur la gauche, puis losque l'on passe la souri Amélioration d'une boite flotante... [ par Nathbest ] Bonjour à tous, alors voilà:J'ai un script qui me permet d'ouvrir une boite (qui se voit à moitié) lorsque je passe la souris deçu via la fonction h_o DOM, id et position [ par Teclis01 ] Bonzourrrrr Je fais une petite application pour un jeu en php/mysql/js/.... et j'ai besoin d'un petit coup de pouce pour le DOM <img sr DOM [ par PROTECTIONNISTE ] Salut,Ma source : var map=document.createElement("map");map.setAttribute("name","ctrlBox");mondiv.app


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Comparez les prix Nouvelle version

Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,749 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.