Showmodaldialog pour tous les navigateurs modernes
Description
Le but de se script et de proposer une alternative à une fonction que j'aprécie assez sous IE à savoir showModalDialog. Pour ceux qui connaisse pas je vous invite à la découvrir directement sur le site de microsoft ici: http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/showmodaldialog.asp ).
Ma source permet à partir d'une 'speudo' fenêtre modal :
- mettre à jour le 'innerHTML' d'un élément
- et/ou mettre à jour le 'value' d'un élément
- et/ou une propriété de style comme par exemple style.backgroudColor d'un élément d'html
- et/ou evaluer une fonction (avec un syntaxe eval(...))
- et/ou appeler une fonction (appel d'une reference a une fonction)
Je vous invite à scruter le code de l'exemple qui vous permet de voir comment combiner les différents effets possibles.
J'ai conçu ce script pour amélioré mon script de color picker (cf exemple 4 ici : http://codessources.votre-web.com/js/colorPicker/V1/)
Sscript testé avec succès sous IE7 béta2 (j'espère que ca fonctionne donc aussi sous IE6, firefox et Safari).
Petite explication d'un cas d'usage classique : mise a jour de la couleur de fond d'un div.
Admettons que quelque part dans le body vous ayez ... <div id="monDiv"></div>
Pour connecter un dialogue modale pour définir la couleur de fond de ce dernier il vous suffira d'écrire :
<div id="monDiv" onClick="newShowModalDialog('myModalPopup.html'
,'style.backgroundColor'
,this.id
,'modal=yes,directories=0,menubar=0,titlebar=0,toolbar=0,width=350,height=200');"></div>
Dans le fichier myModalPopup.html il vous suffira simplement d'appeler la fonction de rappel quand bon vous semble afon de rapatrier une valeur de couelur via une seule ligne de code : window.opener.modalCallBackFunction(window.self,<VOTRE CODE DE COULEUR>);
Je vous invite viviement à commenté cette source.
Ma source permet à partir d'une 'speudo' fenêtre modal :
- mettre à jour le 'innerHTML' d'un élément
- et/ou mettre à jour le 'value' d'un élément
- et/ou une propriété de style comme par exemple style.backgroudColor d'un élément d'html
- et/ou evaluer une fonction (avec un syntaxe eval(...))
- et/ou appeler une fonction (appel d'une reference a une fonction)
Je vous invite à scruter le code de l'exemple qui vous permet de voir comment combiner les différents effets possibles.
J'ai conçu ce script pour amélioré mon script de color picker (cf exemple 4 ici : http://codessources.votre-web.com/js/colorPicker/V1/)
Sscript testé avec succès sous IE7 béta2 (j'espère que ca fonctionne donc aussi sous IE6, firefox et Safari).
Source / Exemple :
Tout est dans le zip commenté. L'exemple du zip est directement accessible en démonstration ici : http://codessources.votre-web.com/js/modalDialogue/exemple.html
Conclusion :
Petite explication d'un cas d'usage classique : mise a jour de la couleur de fond d'un div.
Admettons que quelque part dans le body vous ayez ... <div id="monDiv"></div>
Pour connecter un dialogue modale pour définir la couleur de fond de ce dernier il vous suffira d'écrire :
<div id="monDiv" onClick="newShowModalDialog('myModalPopup.html'
,'style.backgroundColor'
,this.id
,'modal=yes,directories=0,menubar=0,titlebar=0,toolbar=0,width=350,height=200');"></div>
Dans le fichier myModalPopup.html il vous suffira simplement d'appeler la fonction de rappel quand bon vous semble afon de rapatrier une valeur de couelur via une seule ligne de code : window.opener.modalCallBackFunction(window.self,<VOTRE CODE DE COULEUR>);
Je vous invite viviement à commenté cette source.
Codes Sources
A voir également
- Showmodaldialog pour tous les navigateurs modernes
- Tester navigateurs - Forum ASP.NET
- Showmodaldialog ✓ - Forum Javascript / DHTML
- Rafraichir fenetre mere lors de la fermeture d'une showModalDialog ✓ - Forum Javascript / DHTML
- ShowModalDialog - Forum ASP / ASP.NET
- Vbs et navigateurs par defaut - Forum Visual Basic 6
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.