begin process at 2008 08 28 21:38:55
1 233 395 membres
487 nouveaux aujourd'hui
14 291 membres club

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 : 6 358

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

Pub



Appels d'offres

Recherche developpeur ...
Budget : 700€
SITE MARCHAND LOCATION...
Budget : 3 000€
SITE MARCHAND POUR HOTEL
Budget : 4 000€

CalendriCode

Août 2008
LMMJVSD
    123
45678910
11121314151617
18192021222324
25262728293031

VS Express FR Gratuit !

VS Express en français et 100% gratuit !

Téléchargements

Boutique

Boutique de goodies CodeS-SourceS