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

Ce site au démarrage

begin process at 2012 02 11 23:38:32

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

BOITE DE DIALOGUE DE VALIDATION MODAL

Information sur la source

Note :

10,00 / 10

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

Auteur : mickaelpfr

Ecrire un message privé

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

BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai

RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES par william voirol

PLUGIN JQUERY LISTE MODIFIABLE (COMBO) AUTOCOMPLÉTÉE par medkarim

GESTION DE NUMÉRO DE TÉLÉPHONE SIMPLE DANS FIREFOX7 par rotomtom

RECOMMANDER CETTE PAGE AVEC MAILTO, ACCENT ET RETOUR LIGNE D... par weabow

Toutes les sources de la catégorie Formulaire

Sources en rapport avec celle ci

DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev

VÉRIFIER LA VALIDITÉ D'UN NUMÉRO D'UNE CREDIT CARD/AMEX/MAST... par BlackWizzard

UID - FRAMEWORK JAVASCRIPT par Kimjoa

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

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

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

Nos sponsors

Derniers Blogs

SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc

[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier

[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko

Forum

RE : TRANSFARMATION DES VARIABLES par marlopremier

RE : ADAPTER UN SCRIPT POUR IE6 par Ewan83

ADAPTER UN SCRIPT POUR IE6 par Ewan83

RE : CREATION DE SCORING OU RATING par Alex16000

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Passerelle Pericles sur site Joomla 17
Budget : 499€
Infogerance Serveur Debian Linux
Budget : 2 400€
Developpeur applications iphone - ipad - android
Budget : 800€

Logiciels

PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011