Personnaliser les boîtes de dialogue

Soyez le premier à donner votre avis sur cette source.

Vue 28 800 fois - Téléchargée 3 115 fois

Description

Bonjour,

Suite à une question qui m'a été récement posée, voilà un script qui permet afficher une boite de dialoque personnalisée.
J'espère que ça répondra aux questions.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

ludojd
Messages postés
8
Date d'inscription
dimanche 15 août 2010
Statut
Membre
Dernière intervention
10 mars 2011

très bon travail !
slushgood
Messages postés
3
Date d'inscription
mercredi 27 octobre 2010
Statut
Membre
Dernière intervention
27 octobre 2010

Bonjour je reviens sur se sujet car j'aurais besoin d'un petit coup de main.
voila j'ai une première fenêtre du type Html:

<html>
<head>
<meta http-equiv= "Content-Type" content="text/html; charset=iso-8859-1">
<LINK rel=stylesheet type="text/css" href="include/opac.css">
<title>Microbib Opac - Fiche Document</title>
<link rel="shortcut icon" href="images/icobook.ico" />
<script type="text/javascript" src="include/prototype.js"> </script>
<script type="text/javascript" src="include/window.js"> </script>
<script type="text/javascript" src="include/debug.js"> </script>
<script type="text/javascript" src="include/securite.js"></script>
<script type="text/javascript">
<!--
var sesPlus = new Array("sestitres","sesauteurs","sonresume");

function init_msg()
{
for(var i=0; i<sesPlus.length; i++)
if(document.getElementById(sesPlus[i]).style.display == "block")
document.getElementById(sesPlus[i]).style.display = "none";
}

function toggle_msg(n)
{
init_msg();
var id=sesPlus[n]; document.getElementById(id).style.display (document.getElementById(id).style.display "none" ? "block" : "none");
}

function revenir()
{
if(LireCookie('affine') == 1) location.replace('affineliste.wco');
else if(LireCookie('affine') == 2) location.replace('trier.wco');
else location.replace(LireCookie('recherche'));
}

var support = '<%= detail.document%>';
var numero = '<%= detail.no_exemp %>';

//-->
</script>
</head>



<li>[# ]</li>
<li>Le Catalogue Commun
</li>
<li>[# >>Recherche Simple]</li>
<li>[# >>Recherche Etendue]</li>
<li>[# >>Recherche par Mot-Matière]</li>
<li>[# >>Nouveautés]</li>
<li> <script language="JavaScript">
<!--
if(LireCookie(COOKIE_FONC_RESERV)==".T.")
document.write(espacelecteur());
//--></script>
<li> <script type="text/JavaScript">
<!--
if(estConnecte())
document.write(estconnecte()); ;
//--></script>
<li> <script language="JavaScript">
<!--
if('<%= multisite %>'==".F.")
document.write(reglements());
//--></script>

<li> <script language="JavaScript">
<!--
if(LireCookie(COOKIE_FONC_MULTISITE)==".T.")
document.write(multisite());
//--></script>




<%=detail.document+" N° "+detail.no_exemp%>



<center>
<%= IIF(!empty(detail.type_docum),"","NR") %>
</center>,
Titre principal,
,
<%= detail.titre %>,

----

----

Sous-Titre,
,
<%= detail.soustitre %>,

----

Autres Titres,
,
<%= detail.autre_tit %>,

----

Responsabilité,
,
<%= detail.auteur %> <%= detail.fonction %>,

----

Autres Responsabilités,
,
<%= detail.autre_aut %>,

----

Editeur/Date d'édition,
,
<%= detail.editeur %> / <%= detail.annee_ed %>,

----

Collection/Série,
,
<%= detail.collection %> / <%= detail.serie %>,

----

<%= IIF((detail.type_docum="V"),"Copyright/Support/Collation",IIF((detail.type_docum="S"),"N°Distributeur/Support/Détails",IIF((detail.type_docum="E"),"ISBN/Support","ISBN/Nb pages/Format"))) %>,
,
<%= IIF((detail.type_docum="V"),detail.copyrigh + " / " + (IIF(detail.support="A","VHS",IIF(detail.support="B","DVD",IIF(detail.support="C","DivX",IIF(detail.support="U","Autre","NR"))))) + " / " + detail.version + " " + detail.couleur + " " + TRANSFORM(detail.duree) + "minutes",IIF((detail.type_docum="S"),detail.no_distr + " / " + (IIF(detail.support="A","CD Audio",IIF(detail.support="B","K7 Audio",IIF(detail.support="C","DVD Audio",IIF(detail.support="D","Disque vinyl",IIF(detail.support="U","Autre","NR")))))) + " / " + detail.depot_le + " " + detail.type_enr,IIF((detail.type_docum="E"),detail.isbn + " / " + (IIF(detail.support="A","CD-ROM",IIF(detail.support="B","Disquette",IIF(detail.support="C","DVD-ROM",IIF(detail.support="D","Fichier numérique",IIF(detail.support="E","Site Internet",IIF(detail.support="F","Autre",IIF(detail.support="G","Textes-références-périodiques","NR")))))))),detail.isbn +" / " + detail.nb_page + " / " + detail.dimensio))) %>,

----

Bibliothèque dépositaire de cet exemplaire : <%= detail.ville %>,

<center>

<%= IIF(!empty(detail.code_lan),"","NR") %>
</center>,
----

Type de document,
,
<%= detail.statut%>,

----

Disponibilité,
,
<%= iif(empty(detail.dat_retpre),"Ce document est disponible","Retour prévu le " + dtoc(detail.dat_retpre) + "") %>,

----

Genre/Public visé,
,
<%= detail.genre %> / <%= detail.pub_vise %>,

----

Localisation/Cote,
,
<%= detail.localisati %>/ <%= detail.cote %>,

----

Mot(s) matière,
,
<%= detail.matiere %>,

----

Résumé,
,
<%= detail.resume %>
----, <center>
<hr>
<script language=\"JavaScript\">

if(LireCookie(COOKIE_FONC_RESERV)==\".T.\")
document.write(lienReservation());
</script>
</center>
</td>




<< Revenir en arrière

Site où récuperer le livre
<SELECT NAME ="site_depot">
<option value="1">premier
<option value="2">deuxieme
<option value="3">troisieme
<option value="5">quatrieme
</SELECT>

</html>

Ne vous souciez pas trop du contenu mais plutôt des dernières lignes elles font apparaitre une fenêtre Modal avec un menu a choix multiple.

Mon securite.js contient entre autre les infos suivante:
// Méthode site depot

function openDialog(id) {
Dialog.alert($(id).innerHTML, {className: "alphacube", width:300,
okLabel:"Ok",ok: reserver(),
})
EcrireCookie(COOKIE_SITE_DEPOT,$('site_depot').getInputs('text'));

}

Ma fenêtre apparait tout ce passe bien ,
mais voila mon dilemme j'aimerais récupérer dans un cookie "site_depot" le résultat choisi dans ma fenêtre modal ? comment faire ?
merci pour votre aide.
leejkd
Messages postés
3
Date d'inscription
lundi 15 mars 2010
Statut
Membre
Dernière intervention
27 juillet 2010

Rien à dire, vous pouvez faire la même chose avec boite confirm et prompt.
Oumbra
Messages postés
23
Date d'inscription
lundi 18 janvier 2010
Statut
Membre
Dernière intervention
14 mars 2010
13
J'ai enfin trouvé :)

Je vous explique donc comment avoir une boite de dialogue avec un effet modal :)

1. Placer un div en DEBUT de fichier html (JUSTE APRES body), cela simule un fond grisé mais rien de base. (mon image 'shadow.png' est une image grise):

2. Ajouter les lignes suivantes 'ShowFond();' et 'HideFond();' tel que :

<!-- dans la fonction initMsgBox() -->
window.alert = function(msg)
{
showMsgBox(msg);
ShowFond();
}

<!-- dans la fonction initMsgBox() -->
btn.onclick = function()
{
closeMsgBox();
HideFond();
}

<!-- dans la fonction showMsgBox(content) -->
$('msgBoxContent').innerHTML = content;
centerOnScreen($('msgBox'));
new Effect.Appear('msgBox',{duration:0.2});
ShowFond();
}

3. Placer les fonctions suivantes dans le fichier, cumstomMsgBox.js :

function ShowFond()
{
var Obj;
//-- on affiche le fond
Obj = document.getElementById('D_FOND');
if( Obj)
{
with( Obj.style)
{
position="absolute";
display="";
left = "0px";
top = "0px";
}
}

}

function HideFond()
{
var Obj;
Obj = document.getElementById('D_FOND');
if( Obj)
{
with( Obj.style)
{
display="none";
}
}
}

et voila vous avez désormé une boite de dialogue alert() avec un effet modal !!!
Pour appeler une boite de dialogue sans bouton ou autre évenement de l'utilisateur (click, reload, etc), placez : "Event.observe(window, 'load', initMsgBox, false);" dans le header de la page html et lorsque vous appelez votre boite (moi je le fais lorsque des restriction php sont fausses ou spéciales) et bien il suffit de faire un :
"<script language='javascript'>initMsgBox();alert('Votre message');</script>"

Voilà !!

Je remercie tout particulièrement duke pour son aide :)

Au revoir et a bientot :)

ps: je souhaite savoir s'il est possible de faire la meme chose avec une boite de dialogue prompt()???
N'hésitez pas à m'aiguiller, je fais beaucoup de recherche mais bon un peu d'aide est toujours bien venue :)
Oumbra
Messages postés
23
Date d'inscription
lundi 18 janvier 2010
Statut
Membre
Dernière intervention
14 mars 2010
13
Ça Fonctionne enfin !!!!!!!!!!!!!

Enfin pas complètement ^^'...

Avec l'amélioration que j'ai cité au-dessus (le grisage du fond) et bien ma fonction de grisage passe dessus ma belleuh fenêtre :(

Je ne sais pas ou placer ma fonction de grisage pour quelle soit affichier avant ma fenêtre.

Pourrais tu m'éclairer ?

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.