Soyez le premier à donner votre avis sur cette source.
Snippet vu 13 039 fois - Téléchargée 24 fois
<!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>
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 :)
A tu rencontré le problème
Merci
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 ++
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 :)
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.