Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

SHOWMODALDIALOG POUR TOUS LES NAVIGATEURS MODERNES


Information sur la source

Catégorie :Fenêtre & Pop-up Classé sous : shomodaldialogue, shomodaldialog, dialogue, modal, popup Niveau : Initié Date de création : 16/02/2006 Vu / téléchargé: 13 819 / 1 518

Note :
6 / 10 - par 2 personnes
6,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (19)
Ajouter un commentaire et/ou une note


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

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

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Commentaires et avis

signaler à un administrateur
Commentaire de najnoujj le 16/02/2006 20:55:33

merci pour ces codes
mais j'aimerai bien avour des script qui taraitent les émails
merci

signaler à un administrateur
Commentaire de MaX3315 le 17/02/2006 08:31:02

Heu... juste pour etre certain d'avoir compris?

Tu me demande des script qui t'arreterais les emails? Dans ce cas je pense qu'il faudrai mieux allez dans le forum pour en discuté car cette source n'a rien a voir avec les emails.
@+

signaler à un administrateur
Commentaire de johann1 le 17/02/2006 09:58:21

Chapeau Max, je pense que ton travail en stisfera plus d'un!!!

Bonne continuation!
(Ah oui, juste les 2 derniers exemples ne s'ouvrent pas...pour info!)

signaler à un administrateur
Commentaire de MaX3315 le 17/02/2006 10:02:41

En fait dans le zip il y a qu'un seul exemple... les deux autres fichiers HTML étant les popups ouvertes par exemple.html

Merci pour les encouragements, j'devrais encore avoir quelque trucs sympa à venir partager :)

signaler à un administrateur
Commentaire de iubito le 23/02/2006 15:20:17

Je n'ai pas essayé avec IE, mais j'avais eu le pb y'a longtemps : as-tu essayé de mettre une liste déroulante SELECT dans une de tes popup ? As-tu observé quelque chose d'anormal ?

Dans mon cas, la liste SELECT ne pouvait pas s'ouvrir, car dérouler le SELECT provoquait un onblur.

signaler à un administrateur
Commentaire de MaX3315 le 23/02/2006 15:35:39

Là ca passe sans problème sous Firefox.

J'ai mis à jour l'exemple en ligne (juste remplacer le champ input par un select de même id).

Pour les autres naviagteurs faudrait testé la nouvelel démo (cf le champ 'border')
http://codessources.votre-web.com/js/modalDialogue/exemple.html

Si ca passe pas il y aura une autre solution un peut plus bourrin a tester a savoir
Virer l'événement onBlur de la fenetre lorsque l'on a un unFocus sur le select.
Puis au onblur du select remettre le gestionnaire d'evenement de la fenetre.

signaler à un administrateur
Commentaire de iubito le 23/02/2006 15:43:18

Je viens de tester sur IE, le onblur ne doit pas fonctionner, car la fenêtre ne reste pas modale, je peux sans aucun pb cliquer en dehors et mettre le focus sur la grande fenêtre appelante !
Sur Opera la fenêtre est bien modale

signaler à un administrateur
Commentaire de MaX3315 le 23/02/2006 16:12:53

Hum,

Donc IE ne connais pas window.open(url,target,"modal=yes,....)

Faudrait que je me repenche sur le sujet dans ce cas... quitte a utiliser la fonction d'IE lorsqu'elle existe... ca ne devrait pas changer grand chose au script.

Je posterai une remarque lorsque j'aurai corrigé ce léger bug d'ici quelque jour.

Merci pour les tests.

signaler à un administrateur
Commentaire de MUSUL le 09/03/2007 10:55:24

Testé sous firefox 2.0.0.1 et ne marche pas du tout :

Erreur : [Exception... "Illegal operation on WrappedNative prototype object"  nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)"  location: "native frame :: <unknown filename> :: <TOP_LEVEL> :: line 0"  data: no]

signaler à un administrateur
Commentaire de MaX3315 le 09/03/2007 11:06:29

Bonjour Musul,

Je viens de retester sous Firefox 2.0.0.2 et j'ai également cette exeption qui est déclenché.. toutefois, le script fonctionne.

En regardant de plus prêt il s'avère que c'est la déclaration du "handler" blur sur l'input text de saisie qui provoque cela.

Pour éviter cela, il suffit de virer les 3 lignes :
//mise en place d'un handler traitant la perte du focus
if (document.addEventListener) { document.addEventListener("blur", window.focus, true); }
else if (document.attachEvent) { document.attachEvent("onblur", window.focus); }

(bien sur, le blur n'est par conséquent plus géré, mais il reste directement le onKeyUp dans l'input).

Bonne programmation, et merci pour cette remonté de bug.

signaler à un administrateur
Commentaire de cousinlol le 13/03/2007 17:43:59

Bonjour

Merci pour ce code qui me permet de bloquer mes fenêtres sous FF.

Un petit soucis autour duquel je tourne depuis un bon moment

J'ai un script A qui ouvre une fenêtre B avec "newShowModalDialog"
La fenêtre B ouvre la fenêtre C avec "newShowModalDialog" aussi

On défini que "A" est un fomulaire dans un onglet de FF et "B" et "C" des fenêtres de style popup ouvertes avec "newShowModalDialog"

J'affiche "A" pour la 1ère fois, je fais un "newShowModalDialog" de "B", puis un "newShowModalDialog" de "C". "B" et "C" se confondent c'est la cata car en fait "B" n'existe plus et lors du retour de la fille vers la parent....perdu.

Je reviens sur "A" sans la raffraîchir, je me promène de "B" à "C" sans problème.

Je raffaîchi "A", et à nouveau "B" et "C" se confondent.

C'est donc lors de la 1ère utilisation des fenêtres à partir du formulaire de départ que la supperposition se produit.

Quel élément est inconnu la 1ère fois ?

Est-ce normal ? Non

Une idée ?

Merci d'avance

signaler à un administrateur
Commentaire de cousinlol le 14/03/2007 09:33:45

J'ai placé un alert('modal_'+id);

Lors du 1er appel:

la valeur sur B de alert('modal_'+id); est modal_0
la valeur sur C de alert('modal_'+id); est modal_0

ensuite

la valeur sur B de alert('modal_'+id); est modal_1
la valeur sur C de alert('modal_'+id); est modal_0

puis

la valeur sur B de alert('modal_'+id); est modal_2
la valeur sur C de alert('modal_'+id); est modal_0

sur C la valeur ne change jamais

Dois-je la forcer ?

Ce que j'ai fait, c'est changer 'modal_'+id par 'modal_'+reference

Reference étant l'id du bouton d'appel, cet id changeant entre B et C, je n'ai plus de problème.

Je teste à fond.

signaler à un administrateur
Commentaire de MaX3315 le 14/03/2007 10:00:23

Ca marche à priori dans ton cas de figure.
Mais si maintenant tu ouvres deux fenetres devant modifiéer une meme reférence (exemple couleur et couleur de fond via css)... je pense qu'il y aura un petit conflit (genre: feneter deja ouverete... car son l'id demandé sera déjà utilisé).

aurais-tu une url publique pour tester ton problème. A mon avis c'est pas grand chose...
Normalement l'ID est donné selon la taille d'un tableau qui enregister dans la fenetre parente toutes les modales à leur ouverture.

cf MODAL_DIALOG_LIST.length dans la fonction.

Dans ta popup B as-tu bien un tel tableau... regarde voir quel est sa taille à l'ouverture de C... Est-ce que ce tableau existe, etc...

signaler à un administrateur
Commentaire de cousinlol le 14/03/2007 14:59:36

J'ai intégré la fonction dans un intranet et je n'ai pas d'url publique

J'avais placé un alert dans mon code comme ceci :

var id=MODAL_DIALOG_LIST.length;
alert(id);
var newWin=window.open(url,'modal_'+id,windowParam);

Ce qui a donné les valeurs de mon post précédent

Dans mon cas A est parente de B et B est parente de C

Lors de l'ouverture de C la 1ère fois au départ de A, B et C sont à 0.
Et c'est là qu'est le problème.

C ne sait pas que B est déjà là ?

signaler à un administrateur
Commentaire de MaX3315 le 14/03/2007 15:06:13

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

signaler à un administrateur
Commentaire de cousinlol le 14/03/2007 15:33:54

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.

signaler à un administrateur
Commentaire de cousinlol le 08/07/2007 08:31:07

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.

signaler à un administrateur
Commentaire de cousinlol le 29/07/2007 16:45:54

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

signaler à un administrateur
Commentaire de cousinlol le 29/07/2007 16:55:01

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.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Popup comme la boite de dialogue "Connexion" [ par chrix ] je voudrais savoir comment afficher une popup comme la boite de dialogue "Connexion" du site ??? je galère la !!!je n'aime pas avoir tort !!! Dialogue entre une fenetre et une popup [ par bob ] Bonjour à tous G un petit soucis G une page dans laquelle G un boutton "Valider" qui appelle une fonction js qui fait ceci :.....var ouvert=window.ope Popup modal [ par njulio ] Comment maintenir un popup au premier plan. (Showmodal en Delphi par exemple) XML/Javascript [ par Orange73 ] Bonjour,j'ai un xml qui chqrge des données dans du flash.Dans ce xml, j'ai un élément qui doit ouvrir une pop up lors de son click via javascript mais pop up [ par fatatra ] Bonjour a tous;Je fais a un moment donnée dans mon site web appelle a du javascript qui ouvre un popup.Probleme quand je referme ce popup tous ce qui Prblème de function [ par tepe ] BonjourJ'ai un problème avec une fonction externe.Dans mon &lt;head&gt;&lt;script src="prog/prog.js" type="text/javascript"&gt;ReFrame();popup();&lt;/ Enregistrement de forumlaire par popup virtuelle [ par sananas ] Bonjour,J'aimerais s'avoir s'il est possible d'insèrer une page dans un calque pour traiter des données...Je m'explique j'ai un formulaire a remplir a Comunication fentre appelante popup [ par ksouna ] Avant toute chose , j'utilise un moteur de templates SMARTY .Mais je pense pas que mon probléme est lié à sa. Dans mon application j'ouvre un popup lo PopUp ajax lors de l'envoi de formulaire [ par newsmatique ] Bonjour,j'ai un formulaire, qui m'envoi des données en GET sur la page traitement.php, je voudrais que lors de l'envoi de ce formulaire cela m'ouvre u Pop Up [ par PBBDM ] PBBDM Salut a tous,Juste une petite question concernant les popup.Sur Internet Explorer, à l'ouverture d'un popup


Nos sponsors

Sondage...

CalendriCode

Janvier 2009
LMMJVSD
   1234
567891011
12131415161718
19202122232425
262728293031 

Consulter la suite du CalendriCode

Téléchargements



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,718 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.