DHTML Modal window v1.1, modal box amélioré

Voici un petit script-ou devrions-nous dire plugin étend la fenêtre DHTML widget avec l’appui des fenêtres modales. Script fourni par le site DynamicDrive. Ce script permet de faire apparaitre des fenêtres modales avec contenu ajax et manipulation de données.

Une fenêtre modale diffère d’une fenêtre ordinaire DHTML dans la mesure où un «voile» apparaît sur le reste de la page chaque fois que la fenêtre modale est ouvert, l’utilisateur exigeant de manière explicite le fermer avant que le voile est levé et l’utilisateur peut interagir avec la page . Utilisez-le lorsque vous voulez que la fenêtre DHTML commande absolue à l’attention de votre visiteur, comme un formulaire qu’il faut remplir (ou explicitement rejeté). Le script prend en charge une coutume « onclose » gestionnaire d’événements (étendue de son homologue en DHTML fenêtre widget) qui vous permet de réagir et l’accès aux données introduites dans la fenêtre modale lorsque la fenêtre est fermée.

Indications:

DHTML fenêtre modale est une extension des principaux DHTML Widget la fenêtre de script, ce qui signifie qu’il ajoute au scénario original avec la nouvelle capacité sans en modifier aucun des fichiers dans le script original. Pour installer DHTML fenêtre modale, il vous suffit de télécharger dhtmlmodal.zip, et décompresser son contenu.

Il contient l’intégralité d’origine DHTML fenêtre script été altérée, plus un supplément dossier appelé modale / qui vous permet la capacité de DHTML également ouvert des fenêtres modales:

  • dhtmlmodal.zip (se compose des fichiers ci-dessous):
    • windowfiles / (fichiers DHTML fenêtre pour lui-même widget)
    • demo.htm (page de démonstration pour la fenêtre DHTML widget lui-même)
    • démo-modal.htm (page de démonstration pour la fenêtre modale DHTML)
    • modalfiles / modal.css
    • modalfiles / modal.js

Exécuter « demo-modal.htm » dans le dézipper le fichier pour voir comment appeler DHTML des fenêtres modales.

Informations

Ce script se borne à étendre l’original DHTML fenêtre avec la possibilité de créer des fenêtres modales (par dhtmlmodal.open ()). Il ne s’agit pas de remplacer ou de modifier le premier en tout cas.

Vous pouvez toujours appeler régulièrement DHTML fenêtres comme avant.

L’origine sur vos pages avec DHTML fenêtre widget installé, en haut de la page, vous avez le code ci-dessous les références:

<link rel= »stylesheet » href= »dhtmlwindow.css » type= »text/css » />

<script type= »text/javascript » src= »dhtmlwindow.js »></script>

<link rel= »stylesheet » href= »modalfiles/modal.css » type= »text/css » />

<script type= »text/javascript » src= »modalfiles/modal.js »></script>

Avec le script installé, vous avez maintenant accès à une nouvelle fonction appelée dhtmlmodal.open ():

var uniquevar=dhtmlmodal.open(uniqueID, contenttype, contentsource, title, attributes, [recalonload])

Cette fonction se comporte identique à dhtmlwindow.open (), à l’exception de la fenêtre appelé l’utiliser est modale dans la nature. Si l’un des paramètres ci-dessus vous est étranger chercher, il est temps maintenant de lire sur la documentation de la fenêtre d’origine DHTML widget!

Alors, ci-dessous sont quelques exemples d’afficher une fenêtre modale, un automatiquement lorsque la page charges, et l’autre, quand un clic action est effectuée:

Le traitement des données saisies dans une fenêtre modale

Des fenêtres modales sont souvent utilisés pour solliciter des informations auprès des visiteurs, comme un formulaire figurant dans la fenêtre. Dans ces cas, vous souhaiterez probablement une manière d’accéder aux données saisies de l’appel page pour la poursuite de la procédure (au lieu de simplement le soumettre). DHTML fenêtre modale vous permet de le faire, via le « onclose » gestionnaire d’événements.

Rappelez-vous, DHTML une fenêtre modale est une DIV sur la page qui ressemble à une fenêtre, et non une réelle fenêtre. Que si vous utilisez un iframe que son contenu, la manière d’accéder aux données, comme un formulaire, à l’intérieur de la fenêtre n’est pas différent de la forme accéder directement à l’intérieur de votre page-ça existe directement à l’intérieur de votre page!

Maintenant, si votre fenêtre de contenu est un iframe, une propriété exclusive à des fenêtres modales appelé « contentDoc » vous permet d’accéder à cette iframe objet du document, en fournissant la base pour l’accès à quoi que ce soit dans la figure. Avec l’aide de la « onclose » gestionnaire d’événements d’une fenêtre modale pour effectivement parcourue code de votre choix lorsque la fenêtre est sur le point d’être fermé, vous avez tout ce que vous devez examiner, de valider et de récupérer les données saisies dans une fenêtre modale à un script sur l’appel.

Fenêtre modale exemple propriétés Description
onclose=function(){ onclose = function () (

//your code here / / votre code ici

} )

Un gestionnaire d’événements personnalisé qui exécute le code de votre choix chaque fois que la fenêtre modale est fermée. Retourne true à la fin de procéder à la fermeture de la fenêtre, return false pour mettre fin au processus (jusqu’à ce que les conditions sont remplies).
contentDoc Si votre fenêtre modale utilise une iframe que son contenu, utiliser cette propriété pour faciliter le document de référence objet de la page dans le iframe, et aller directement à partir de là. Par exemple:

var mysurvey=dhtmlmodal.open(« surveybox », « iframe », « survey.htm », « Fill out this survey », « width=700px,height=450px,resize=1,scrolling=1,center=1 », « recal »)

mysurvey.onclose=function(){

var iframedoc=this.contentDoc

alert(iframedoc.body.innerHTML) //alert entire body content of iframe / / alerte tout le corps contenu de iframe

alert(iframedoc.getElementById(« myname »).value) //alert value of form field with id= »myname »

} )

Consultez la page de démonstration dans le fichier zip pour tous les codes figurant démo à bien pour vous à digérer.

Aucun commentaire

Répondre

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

18 − douze =

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

CONTACT

We're not around right now. But you can send us an email and we'll get back to you, asap.

Envoi en cours...

©[current-year] WebCSSDesign

Se connecter

Oubli de mot de passe ?