6
votes

Créer une pop up modulaire simple

J'ai une exigence très simple. J'ai deux div. Div1 avec un lien et DIV2 contient du texte.

En cliquant sur le lien de Div1, je souhaite afficher Div2 comme une pop up modulaire simple avec un fond gris et un bouton de fermeture.

est maintenant possible de le faire sans utiliser de plug-ins externes.

Sinon, j'ai vérifié un plugin sur jqueryui. Cependant, il y a tant de fichiers JQuery et CSS référencés dans l'exemple de Teh, que je ne sais pas quoi prendre et quoi partir.


0 commentaires

5 Réponses :


5
votes

Il est sûrement possible sans plugins, mais cela pourrait devenir une plomberie grave.
J'ai utilisé la mise en œuvre de Windows modale «fabriquée à domicile» à moi-même pure JavaScript.
Croyez-moi - ce n'est pas une bonne idée. Même avec jQuery (ne confondez pas avec JQuery UI).

Je vous recommanderais Plugin 'SimpleModal' '' '' '' 'SimpleModal' par Eric Martin (il est sur Stackoverflow aussi et a au moins essayé de répondre à chaque question liée à son produit).
J'aime c'est API et ça marche comme un charme.


2 commentaires

Comment puis-je utiliser ce plugin ici - jQueryui.com/demos/dialog/#modal quoi CSS ou fichiers jQuery à référence


Lorsque vous vérifiez les plugins JQuery, vérifiez toujours le tutoriel. Si cela ne vous aide pas - consulter la page de la page de la page de démonstration. Habituellement, cela frappe le clou.



1
votes

Voici un tutoriel sur Comment faire quelque chose comme ça.


0 commentaires

1
votes

Non, il n'y a pas de fonctionnalité de fenêtre modale intégrée à JQuery. Vous pouvez juser JQuery pour rouler vos propres fenêtres modales, mais dans ce cas, vous ne poserez probablement pas cette question. Il suffit d'obtenir un plugin tiers.


0 commentaires

0
votes

Vous pouvez le faire sans plug-ins, mais la partie délicate que vous voudrez probablement éviter est la modularité.

Si vous souhaitez que la boîte de dialogue se déplace lorsqu'elles cliquent et faites glisser, vous devez définir la position de cette DIV en fonction de la position de la souris, qui peut être jolie rapide. D'où les options JQueryui.

Je suis d'accord, le CSS suffit pour vous donner envie de s'étouffer parfois.

Oh, et juste pour que cela ait été dit, vous pouvez obtenir une boîte grise parfaite avec un bouton qui se transformera pour s'adapter à l'interface utilisateur de tout navigateur: alerte ()


0 commentaires

4
votes

Premièrement, merci pour la recommandation simplamodale @arnis l.

Deuxièmement, il existe une raison pour laquelle tant de plug-ins modal / Lightbox existent. Il y a beaucoup de facteurs à prendre en compte pour créer quelque chose qui est compatible avec le navigateur croisé. Donc, faire ce que vous voulez avec des plugins externes éventuels, mais de le faire correctement, il va prendre beaucoup de code.

Alors, vous avez demandé de l'aide pour créer un simple modal ... pourquoi ne pas essayer SimpleModal;)

Vous pouvez télécharger l'un des exemples pour vous aider à démarrer. Tout ce que vous auriez besoin de faire est d'inclure le fichier .js simplemodal sur votre page et ajoutez peu de styles et il est prêt à partir.

http://www.icmmartin.com/projects/simplemodal-demos/


0 commentaires