Showmodaldialog pour tous les navigateurs modernes

Soyez le premier à donner votre avis sur cette source.

Vue 21 969 fois - Téléchargée 1 926 fois

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

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

Ajouter un commentaire Commentaires
Messages postés
59
Date d'inscription
mercredi 21 juin 2006
Statut
Membre
Dernière intervention
26 octobre 2015

Bon après des tests poussés, cela ne fonctionne pas puisque même l'exemple fourni avec le script (exemple.html) ne bloque pas la fenêtre. Bon c'est dommage, cela a fonctionné un temps qui est révolu.
Messages postés
59
Date d'inscription
mercredi 21 juin 2006
Statut
Membre
Dernière intervention
26 octobre 2015

"Bonjour,

J'ai l'impression que depuis l'installation de la version 2.0.0.4 de firefox, ce script ne bloque plus les fenêtres."

Non, c'est une erreur de ma part, l'id sur le bouton ou le lien est indispensable.
Par exemple sur un lien.
Faire : <a id="t_tiers" onClick="...." fonctionne bien pour le blocage et l'enchainement des fenêtres

Faire : <a onClick="...." ne donne plus de blocage sur la fenêtre ouverte et plante aussi l'enchainement des fenêtres.

Donc attention de ne pas oublier l'id sur l'appel du script.
Messages postés
59
Date d'inscription
mercredi 21 juin 2006
Statut
Membre
Dernière intervention
26 octobre 2015

Bonjour,

J'ai l'impression que depuis l'installation de la version 2.0.0.4 de firefox, ce script ne bloque plus les fenêtres.
Messages postés
59
Date d'inscription
mercredi 21 juin 2006
Statut
Membre
Dernière intervention
26 octobre 2015

Je garde temporairement la modif que j'ai fait et prévient moi lorsque tu auras eu le temps, je testerai volontier la modif à ce moment là.

Merci encore.
Messages postés
170
Date d'inscription
mercredi 18 juin 2003
Statut
Membre
Dernière intervention
11 mai 2009

Ha... oui...
Oui je nomme toute mes fenetres modal_x.

Faudrait quelle se nomme en réalité quelque chose comme:
modal_0
modal_0_0
modal_0_2
modal_0_2_0
modal_1

Je n'ai malheureusement pas beaucoup de temps à consacrer à cela les jours-ci.

Mais au moins il y a une trace ici de cette limitation à une seul niveau de modale.

Merci d'avoir mis le doigt dessus ;)
Afficher les 19 commentaires

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.