Comment afficher le dialogue modal dans la page Web?

Donc, je développe le premier site web sérieux. Je veux mettre en œuvre le scénario suivant, mais j'ai besoin de conseils et de conseils. Il y a un bouton <input type="submit"> sur ma page Web. Lorsque l'utilisateur clique dessus, je veux qu'il ouvre un contenu HTML qui sera affiché sur le dessus de tout le contenu de la page (et positionné de manière centralisée, mais je ne me soucie pas de ce détail pour le moment). Il devrait être très similaire à la façon dont les photos sont affichées sur Facebook. Lorsque l'utilisateur clique sur la vignette de la photo, la photo s'ouvre sur et sur tout le contenu de la page.Comment afficher le dialogue modal dans la page Web?

Maintenant, j'ai mis déjà, mais je pense que mon approche est pas recommandé, car il semble un peu maladroit pour moi, surtout quand je pense à l'entretien du site:
J'ai ajouté un <div> comme le dernier élément au <body>; il est positionné absolument et s'est effondré et sert de conteneur. Lorsque le bouton est cliqué, <div> est rempli avec le contenu et l'état est passé de replié à visible.

Je serais très reconnaissant si quelqu'un souhaite partager les méthodes standard utilisées pour obtenir cet effet et des opinions. Je devine que AJAX et jQuery devraient être fortement utilisés pour cela (j'ai utilisé du JavaScript pur dans ma conception décrite précédemment). Je cherche des exemples de code et des ressources. Merci beaucoup.

Source

2012-05-27 Boris

Ce que vous recherchez est une boîte de dialogue modale et non une fenêtre contextuelle. Les fenêtres contextuelles sont de nouvelles fenêtres, tandis que les modaux sont des éléments HTML qui bloquent la page derrière pour mettre l'accent sur le contenu direct.

Une façon est d'ajouter un <div> au corps, généralement à l'extrémité du corps et de le positionner de manière absolue. Cette div aura zéro, haut, bas, gauche et droite pour s'étirer pour s'adapter à la fenêtre. Au sein de ce div est un autre div qui est également positionné en absolu, par rapport au parent, div de viewport-ajustement. Le positionnement est à vous, mais généralement il est centré en utilisant une formule:

center = (total length - modal length)/2

Le contenu est à vous de choisir. Vous pouvez avoir le contenu déjà chargé et caché dans le DOM que vous pouvez simplement afficher plus tard. Ou chargez le contenu via AJAX si vous le souhaitez.

jQuery already has a modal plugin dans la suite jQueryUI que vous pouvez utiliser et qui contient de nombreuses méthodes à ajouter et à personnaliser.

Source

2012-05-27 21:01:55 Joseph

Excellent, juste ce que je cherchais. À votre santé! – Boris

Bonus pour être accessible au clavier: le focus est correctement pris dans la fenêtre modale tant que vous ne le fermez pas. – FelipeAls

Parfait, je dirais la même chose ... – GOK

Il y a beaucoup d'approches là-bas. Vous pouvez utiliser l'interface utilisateur jQuery (http://jqueryui.com). Mais j'aime l'approche de Bootstrap de Twitter: http://twitter.github.com/bootstrap/javascript.html#modals

Ceci est une configuration très propre et vous pouvez charger le contenu via AJAX avec une petite fonction auto-écrite. Vous n'avez pas besoin d'écrire tout vous-même car il y a beaucoup de plugins disponibles. Et le plugin modal bootstrap est autonome, donc vous pouvez simplement utiliser celui-ci. J'aime l'utiliser et générer le div contenu avec une requête AJAX.

Source

2012-05-27 20:59:38

Merci beaucoup! J'aime le lien que vous avez mentionné dans la réponse, mais en fait, je veux me salir avec le code. Si je suis coincé avec, cependant, je peux toujours aller avec ça. Merci encore. – Boris

Vous pouvez position: absolute; la boîte contextuelle et le définir où sur l'écran que vous le souhaitez. Ensuite, utilisez z-index pour le mettre sur le contenu.

Voici une démo: http://jsfiddle.net/e6BEu/

Source

2012-05-27 21:02:41 Will

Je crois que ce que vous cherchez peut-être Lightbox -comme? Cela pourrait vous donner des idées à tout le moins.

Édition: Ou this one which supports text and such.

Source

2012-05-27 21:04:12 Mizuho