begin process at 2010 03 16 17:06:08
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Fenêtre & Pop-up

 > SHOWMODALDIALOG POUR TOUS LES NAVIGATEURS MODERNES

SHOWMODALDIALOG POUR TOUS LES NAVIGATEURS MODERNES


 Information sur la source

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
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é :16 414 / 1 656

Auteur : MaX3315

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
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/re ference/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/V 1/)

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,too lbar=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,<V OTRE CODE DE COULEUR>);

Je vous invite viviement à commenté cette source.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture DESSINER DES LIGNES SUR VOTRE PAGE WEB
Source avec Zip Source avec une capture ONGLET À TABULATION MULTI BLOC
Source avec Zip Source avec une capture AUTO SCROLLER DE NEWS
Source avec Zip Source avec une capture GÉNÉRATEUR DE CHAÎNE POUR LA FONCTION DATE() DE PHP4
Source avec Zip Source avec une capture MASQUAGE DES EMAILS AUX ROBOTS DE RÉCUPÉRATION D'EMAILS (ANT...

 Sources de la même categorie

Source avec Zip Source avec une capture FENETRE D'ACTUALITE par kazma
Source avec Zip Source avec une capture CLASS POP-IN AVEC EFFET SOUS JQUERY DE "CONNEXION" STYLE CS ... par Nementon
Source avec Zip Source avec une capture FENETRE DE LOGIN par kazma
Source avec Zip Source avec une capture MESSAGES VIRTUELS par grarestephane
Source avec Zip Source avec une capture ENVOIE DE MESSAGE AUTOMATIQUE par grarestephane

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture BOITE DE DIALOGUE (AVEC GRISEMENT DE LA PAGE) par nicomilville
POPUP INFOBULLE par hedi_tounsi
Source avec Zip MESSAGE PERSONNALISER par SebMoine
Source avec Zip MISE À JOUR D'UNE LISTE DÉROULANTE VIA UN POPUP par ahcorad
Source avec Zip Source avec une capture WEBMESSAGEBOX par AbriBus

Commentaires et avis

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

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.
@+

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

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

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.

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.

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

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.

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]

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.

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

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.

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

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à ?

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

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.

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.

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.

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) Dialogue Mère/Fille: Variable d'ouverture perdue en cas de refresh du parent [ par lionhell ] J'ai un problème que je n'arrive pas à régler:Dans un CMS (xoops) j'ouvre une popup avec "x = window.open(...)".Ensuite je souhaite accéder à certains PopUp et navigation dans l'opener [ par JuNeau ] Bonjour à tous !Voilà mon problème :Mon site dispose d'un popup, qui comporte un formulaire. Après le traitement du formulaire, mon popup reçoit une U Popup [ par wassimbik ] Bonjour à tousPouvez vous m'aider à trouver un code java script d'une popup virtuelle comme celle qui se trouvant dans  ce site : [url]https://addons. JS - Barre récalcitrante dans une popup... [ par Nitrographik ] Bonjour à tous,J'ai besoins d'un peu d'aide car la je touche les limites de mon maigre savoir...J'ai fait une recherche mais je n'ai pas trouvé de rép popup de connection [ par hraiwen ] bonjourj'ai une page annuaire.php je veux faire la connection à l'anuaire je clique sur un lien qui me fait apparaitre un popup dans ce popup je fait ouverture popup conditionnel [ par jolilola64 ] Bonjour,je suis tout nouveau sur le forum et depuis 3 ans je developpe avec mes connaissances le site que nous avons.Aujourd'hui je dois mettre un pop Creer une gallerie photo+popup [ par SpikeMinoda ] Salut, j'essais tant bien que mal de creer une galerie mais rien a faire, je n'y arrive pas... je comprend rien au code... alors si quelqu'un a un cod


Nos sponsors


Appels d'offres

Sondage...

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), 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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,624 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales