CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 08 01 01:41:27

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

MODAL ET PAGE APPELANTE

Information sur la source

Note :

8,00 / 10

Catégorie :Fenêtre & Pop-up Classé sous :fenetremodal, popup, pageappelante, retourdevaleur Niveau :Débutant Date de création :08/12/2005 Vu :14 852

Auteur : steveurcle

Ecrire un message privé

Commentaire sur cette source (9)

Ajouter un commentaire et/ou une note

Description

Ce code permet aprés avoir affiché une fenetre modal, de retourner une valeur saisi afin de l'inserer dans un input texte.

Source

à ecrire dans une page html simple qui ouvre une fenetre Modal
<html>
<script>
function afficheModal() {
var test = "";
test = window.showModalDialog('testModal.html','popup','dialogWidth=400, dialogHeigh=300');
window.document.forms['testForm'].elements['texte'].value = test;
}
</script>
<body onload="javascript: afficheModal()">
<form name="testForm">
<p>test de l'affichage du popup modal et de la recuperation de la valeur dans un champ input</p>
<input type="text" id="texte">
</form>
</body>
</html>
Ensuite dans la page testModal.html qui est notre fenetre modal on ecrit le code suivant pour recuperer la valeur choisi dans un select
<html>
<script>
function retourVal() {
window.returnValue = window.document.forms['testModalForm'].elements['selectTest'].value;
window.close();
}
</script>
<body>
<form name="testModalForm">
<select name="selectTest">
<option value="toto">toto</option>
<option value="titi">titi</option>
</select>
<input type="button" value="valid" onclick="javascript: retourVal();">
</form>
</body>
</html>
bon courage

à ecrire dans une page html simple qui ouvre une fenetre Modal
<html>
<script>
  function afficheModal() {
    var test = "";
    test = window.showModalDialog('testModal.html','popup','dialogWidth=400, dialogHeigh=300');
    window.document.forms['testForm'].elements['texte'].value = test;
  }
</script>
<body onload="javascript: afficheModal()">
<form name="testForm">
<p>test de l'affichage du popup modal et de la recuperation de la valeur dans un champ input</p>
  <input type="text" id="texte">
</form>
</body>
</html>

Ensuite dans la page testModal.html qui est notre fenetre modal on ecrit le code suivant pour recuperer la valeur choisi dans un select

<html>
<script>
function retourVal() {
window.returnValue = window.document.forms['testModalForm'].elements['selectTest'].value;
 window.close();
}
</script>
<body>
<form name="testModalForm">
<select name="selectTest">
  <option value="toto">toto</option>
  <option value="titi">titi</option>
</select>
<input type="button" value="valid" onclick="javascript: retourVal();">
</form>
</body>
</html>

bon courage

Conclusion

s'il ya des bugs envoyé les mois histoire que je modifie ;)

Sources de la même categorie

FENETRE D'ACTUALITE par kazma

CLASS POP-IN AVEC EFFET SOUS JQUERY DE "CONNEXION" STYLE CS ... par Nementon

FENETRE DE LOGIN par kazma

MESSAGES VIRTUELS par grarestephane

ENVOIE DE MESSAGE AUTOMATIQUE par grarestephane

Toutes les sources de la catégorie Fenêtre & Pop-up

Sources en rapport avec celle ci

POPUP INFOBULLE par hedi_tounsi

REMPLACER LES "TITLE" PAR DES POPUPS par themioux

DYNPOPUP : POPUP CENTRÉE DYNAMIQUE par kakoo

CACHER LES ADRESSES EMAILS AVEC UN BOUTON VIA UN POPUP: par jeepjeep14

MISE À JOUR D'UNE LISTE DÉROULANTE VIA UN POPUP par ahcorad

Commentaires et avis

Commentaire de FraGag le 09/12/2005 01:51:11

Trois problèmes :
1- Pas nécessaire de mettre "javascript:" dans les attributs d'événements (onclick, onload), seulement dans les liens hypertexte.
2- Il manque un t à « dialogHeight ».
3- Ce n'est pas nécessaire d'entourer les champs de formulaire dans un formulaire (<form>), ils peuvent vivre sans <form> ! En plus, ça allonge le code inutilement.

Pour ceux qui n'auraient rien dans le pop-up, vérifiez l'extension (il faut .html, moi je mets toujours .htm). C'est dommage que ça ne fonctionne que sous Internet Explorer (showModalDialog n'est pas standard, je crois).

Commentaire de johann1 le 09/12/2005 12:57:51

Sympa steveurcle ... C'est intéressant je trouve!
Bonne continuation!

Commentaire de DjZebulon le 12/12/2005 12:33:50

Bonjour,
Code tres interressant pour moi, j'ai simplment un petit probleme (qui est bete, mais la tête dans le brouillard), j'ai un input text en plus sur la fenetre appelante et je voudrais avoir un champ a completer sur la deuxième fenetre qui renvois sa value au champs sur appelant §§
Pas tres claire mais simple je pense
Merci
Stef

Commentaire de Arto_8000 le 18/12/2005 19:17:52

FraGaG -> Bien sur que ça peut s'afficher sans les balises form, mais c'est pas du tout selon les normes w3c.

steveurcle -> Tu peux remplacer

window.document.forms['testModalForm'].elements['selectTest'].value
par :
window.document.testModalForm.selectTest.value;

Commentaire de FraGag le 18/12/2005 23:07:39

Arto_8000 -> Au contraire, c'est bel et bien standard. Si je regarde dans le DTD Strict du HTML 4.01, on voit :
<!ELEMENT P - O (%inline;)* -- paragraph -->
et :
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
ainsi que :
<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">
et il n'y a pas un seul form là-dedans (idem pour le HTML 4.0) ! En clair, ça dit qu'on peut mettre des contrôles de formulaires directement dans un paragraphe. Je le savais, parce que j'ai déjà validé des documents avec des <input> sans <form>... C'est pas pour être méchant, hein... De toutes façons, il manque l'attribut « action » aux <form>s.

Commentaire de AbriBus le 23/02/2006 15:08:32

Salut a tous,
j'ai decouvert la commande window.showModalDialog il y a quelque dizaines de minutes et je croyais bien que ca serait l'apotéose car c'est exactement ce que je cherchais a faire...
Mais comme chacun sait, chaque medaille a son revers, voici donc le travers que j'ai decouvert sur cette fonction...:
window.showModalDialog ne fonctionne QUE sur IE4.0 ou +... ce qui n'inclu pas nottament FireFox.
Voila le lien de chez billou qui parle de cette fonction:
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/showmodaldialog.asp

Quelqu'un aurait-il une alternative a ce probleme ?
FraGag> Malgrés la qualité de ton src, je ne met pas de note car j'ai pas trouvé la solution a mon probleme... mais c'est de bonne qualité.

AbriBus

Commentaire de FraGag le 24/02/2006 07:13:45

AbriBus -> J'ai vu il n'y a pas longtemps ce code tout simple quelque part, à mettre dans la page qui doit être modale :

...
<body onblur="focus()">
...
</body>
...

Quand la fenêtre perd le focus (est "blurrée"...), on lui redonne le focus. Il suffit donc de simplement appeler window.open() pour ouvrir cette fenêtre qui gardera le focus tant qu'elle sera affichée. Par contre, je crois que showModalWindow() ne retourne que quand la fenêtre est fermée, alors que open() retourne tout de suite. Alors, si la fenêtre qui affiche la fenêtre "modale" doit retrouver une valeur de celle-ci, il faudrait plutôt que la fenêtre modale envoie elle-même les données à la fenêtre appelante.

Quand tu a dit "FraGag> Malgrés la qualité de ton src, ...", tu ne te serais pas trompé ? C'est steveurcle l'auteur, moi je ne fais que corriger et donner des solutions alternatives... :)

Commentaire de AbriBus le 24/02/2006 09:57:48

Ha oui, autant pour moi... Désolé pour steveurcle... (la remarque reste valable puisqu'indépendante de l'auteur).

En effet, le probleme que tu souleve est le VRAI probleme de ma fenetre modale... que la fenetre conserve le focus ne m'interresse que modérément. Il me faut par contre, en effet, une fenetre qui me retourne une valeur, chose que je ne peux pas faire avec l'instruction open (accessoirement, une fenetre modale suspend l'execution du code, fut-ce en HTML... si seulement cela m'etait possible, je ferais un algo du type:
Variant FenetreModale C'EST:
     TANT QUE maFenetre.ouverte = VRAI ALORS
          ATTEND 1 seconde
     FIN TANT QUE
     RETOURNE maFenetre.valeurChoisie
FIN FenetreModale
sauf que je sais pas s'il y a une fonction en javascript qui me permet de suspendre le code pendant un laps de temps donné (ici, ligne "ATTEND 1 seconde"))

Commentaire de Arto_8000 le 24/02/2006 18:29:18

Il n'y a pas vraiment de fonction du genre sleep comme en PHP, mais tu peux utiliser les fonction setTimeout("fonction()",1000) ou setInterval("fonction()",1000). La première fonction vas exécuter le code dans le laps de temps donne en 2e paramètre et la deuxième fonction, exécuter la commande à tout les x millisecondes.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Rafraichir la fenetre "parent" [ par aurélien ] Bonjour à tous, J'ai une page en html/php a partir de laquelle, en cliquant sur un bouton, j'ouvre un popup, et j'aimerais que lorsque je ferme ce pop Fermeture de formulaire [ par Freddy ] Dans une popup,un formulaire d'ajout je voudrais qu'une fois les données envoyer,la popup se ferme automatiquementdes idées ? onUnload event, popup... [ par VicoLaChips2 ] Voila mon problème. J'ai mis dans la balise bodyd'une frame le code suivant : <body onUnload="return goodbye('<% =user %>';">Le script : f Submit et popup [ par Woby ] Bonjour,je me demandais si il était possible d'ouvrir une autre page par l'intermédiaire d'un bouton submit sans que la page où il se trouve ne chang Fermer PopUp [ par SYL20 ] Bonjour, je ne m'y retrouve pas... pourriez-vous m'aider en m'indiquant une formule magique permettant de fermer une fenêtre popup lorsqu'on clique su pb base de donnees - popup [ par ratch ] Bonsoir à tous,J'ai un souciJ'ai une base de données qui affiche une liste de contactsavec la possiblité de cliquer sur le nom de la personne pouravoi Fonction qui permet de fermer une popup après le chargement de cette popup [ par Nabel ] Bonjour, bonjour,Voilà, j'ai fait un script ASP qui permet de créer un ficheir xls sur le serveur, or, je ne veux pas que ce ficheir reste sur le serv pb d'ouverture fermeture de popup [ par jeffb ] bonjour,j'ai ouvert une fenetre popup avec la fonction:popupHandle=open('popup.asp', 'Cobrowsing1', 'status=no, resizable=1, scrollbars=1, toolbar=0, reload et popup [ par booth ] bonjour voilà la situationj'ai un frame qu'on va appeler "haut", et une frame qu'on va appeler "bas".à partir de la frame "haut" je lancer un pop-up e Distance popup [ par Braco ] J'ai une popup placée sur l'écran. Ce que je veux, c'est récupérer la distance ( top et left ) de cette même fenêtre une fois qu'elle à été déplacée s

Nos sponsors

Derniers Blogs

WP7 5K BELGIUM CHALLENGE par junarnoalg

LES MONADES POUR LES NULS par mdufourneaudravel

[WP7] AJOUTER DES IMAGES DANS LA MEDIA LIBRARY D'UN WINDOWS PHONE 7 par Audrey

VIVE LES MOCKS ET LES POCOS par vLabz

[WF4] WORKFLOW AND CUSTOM ACTIVITIES - BEST PRACTICES (4/5) par JeremyJeanson

Forum

RE : PROBLEME ENCHAINEMENT DE FONCTION par loicseg

PROBLEME ENCHAINEMENT DE FONCTION par loicseg

RE : MODéLISATION FILE D'ATTENTE DE COMMANDE AVEC HTML/AJAX/MYSQL par PetoleTeam

RE : CHANGER LA VALEUR D'UNE VARIABLE PAR UNE FONCTION par PetoleTeam

RE : SUBMIT AVEC UNE IMAGE EN AJAX : ENVOI DE FORMULAIRE par romi36

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Logiciels

Crystal Report (11)
CRYSTAL REPORT (11)

Crystal Reports est un outil de reporting souple et puissant, vous pouvez très facilement consult...

Cliquez pour télécharger Crystal Report
Academy System (12.0.2.0)
ACADEMY SYSTEM (12.0.2.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Xilisoft iPod Vidéo Convertisseur 6 (6.0.3.0419)
XILISOFT IPOD VIDéO CONVERTISSEUR 6 (6.0.3.0419)

Xilisoft iPod Vidéo Convertisseur est un outil puissant de conversion d'iPod, facile à utiliser. ...

Cliquez pour télécharger Xilisoft iPod Vidéo Convertisseur 6
Xilisoft iPhone Vidéo Convertisseur 6 (6.0.3.0419)
XILISOFT IPHONE VIDéO CONVERTISSEUR 6 (6.0.3.0419)

Xilisoft iPhone Vidéo Convertisseur est le meilleur logiciel de conversion iPhone qui peut facile...

Cliquez pour télécharger Xilisoft iPhone Vidéo Convertisseur 6
Xilisoft iPad Vidéo Convertisseur 6 (6.0.3.0419)
XILISOFT IPAD VIDéO CONVERTISSEUR 6 (6.0.3.0419)

Il s'agit d'un logiciel polyvalent pour convertir les formats vidéo/audio populaires en formats p...

Cliquez pour télécharger Xilisoft iPad Vidéo Convertisseur 6