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.
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
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.
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 :)
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.
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 :)
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.