CodeS-SourceS est hébergé par Frontier.fr

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresGuide achatConnexion

begin process at 2009 07 05 19:20:53

SILVERLIGHT 3 : COMMUNICATION ET MULTICAST par KooKiz

[PERSO] DéCOUVERTES ESTIVALES : LINUX (PART I) par FREMYCOMPANY

[REFACTORING] RESHARPER POUR VISUAL STUDIO 2010 (PREVIEW) par tja

[REFACTORING] ANALYSER VOS EXCEPTIONS AVEC RESHARPER EXCEPTIONAL par tja

SHAREPOINT 2007 : PATTERNS & PRACTICES SHAREPOINT GUIDANCE par phil

CODE POUR EDITEUR DE TEXTE AVEC PRISE EN CHARGE DU COPIER/COLLER GARDANT LA MISE EN FORME par lolhangman

RE : COMMENT RéCUPéRER LES VARIABLES DE PLUSIEURS FORMULAIRES POUR OUVRIR FICHIER EXCEL par Bul3

RE : JOUER UN SON PAR UN CLIC par azuron

RE : COMMENT RéCUPéRER LES VARIABLES DE PLUSIEURS FORMULAIRES POUR OUVRIR FICHIER EXCEL par jdmcreator

COMMENT RéCUPéRER LES VARIABLES DE PLUSIEURS FORMULAIRES POUR OUVRIR FICHIER EXCEL par FAURE364Denis

+ de logiciels à télécharger

1 464 798 membres
293 nouveaux aujourd'hui
15 045 membres club

Trouver une ressource

Trouvez une ressource parmi 40 095 codes, 1 302 984 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

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

Auteur : mickaelpfr

Ecrire un message privé

Note :

10,00 / 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

LIBRAIRIE DE DRAG AND DROP

BULLE D'AIDE COMPATIBLE IE ET MOZILLA

GÉNÉRATEUR DE CSS (HÉBAUCHE)

Toutes les sources de mickaelpfr

Sources de la même categorie

CALCULS RAYNAUX V2 par Ali Bibi

VALIDATION D'UN FORMULAIRE par grarestephane

CHAT VIRTUEL par grarestephane

AJOUTER ET SUPPRIMER DES FICHIERS DANS UNE LISTE par grarestephane

TEXTAREA : LIMITER LA LARGEUR ET LA HAUTEUR DU TEXTE SAISIE par vilfarfadet

Toutes les sources de la catégorie Formulaire

Sources en rapport avec celle ci

INTERFACE.CAPSULE , POUR DES BOITES ARRONDIS , 1ER ÉLÉMENTS ... par Kimjoa

BOITE DE DIALOGUE (AVEC GRISEMENT DE LA PAGE) par nicomilville

DOM BUILDER : PROTOTYPE ROCKS ! par ralecul

TABLEAU HTML DYNAMIQUE AVEC JAVASCRIPT DOM par LogansRun

UN CHRONOMETRE EN SVG+JAVASCRIPT par coucou747

Commentaires et avis

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