Crear una ventana emergente modal simple

Question

Tengo un requisito muy simple. Tengo dos div. Div1 con un enlace y Div2 contiene algo de texto.

Al hacer clic en el enlace en Div1, quiero mostrar Div2 como una ventana emergente modal simple con un fondo gris y un botón de cerrar.

Ahora es posible hacerlo sin utilizar ningún complemento externo.

Si no, revisé un complemento en jqueryui. Sin embargo, hay tantos archivos jquery y css a los que se hace referencia en el ejemplo, que no sé qué llevar y qué dejar.

Answer 1

Seguramente ES posible sin complementos, pero que podría resultar ser una cañería seria.
He utilizado la implementación de ventanas modales 'hechas a mano' en javascript puro.
Confíe en mí, no es una buena idea. Incluso con jQuery (no confundas con jQuery UI).

Te recomendaría 'SimpleModal' plugin por Eric Martin (también está en StackOverflow y al menos ha intentado responder a todas las preguntas relacionadas con su producto).
Me gusta su API y funciona como un encanto.

Answer 2

Here's a tutorial sobre cómo hacer algo como esto.

Answer 3

No, no hay funcionalidad de ventana modal incorporada en jQuery. Puede juse jQuery para rodar sus propias ventanas modales, pero en ese caso probablemente no haría esta pregunta. Solo obtenga un complemento de terceros.

Answer 4

Puede hacerlo sin ningún complemento, pero la parte difícil que probablemente querrá evitar es la modularidad.

Si desea que el cuadro de diálogo se mueva al hacer clic y arrastrar, debe establecer la posición de ese div en función de la posición del mouse, que puede volverse bastante desigual rápidamente. de ahí las opciones jqueryui.

Estoy de acuerdo, el CSS es suficiente para hacer que quieras asfixiar a veces.

Ah, y por lo que se ha dicho, se puede obtener un cuadro gris perfecto con un botón que va a transformarse para adaptarse a la interfaz de usuario de cualquier navegador: alert()

Answer 5

En primer lugar, gracias por la recomendación SimpleModal @Arnis L.

En segundo lugar, hay una razón por la que existen tantos complementos modal/lightbox. Hay muchos factores a considerar para crear algo que sea compatible con varios navegadores. Por lo tanto, hacer lo que quiera sin plugins externos es posible, pero para hacerlo bien, tomará mucho código.

Por lo tanto, pidió ayuda a crear un modal sencilla ... ¿por qué no tratar SimpleModal;)

Puede descargar cualquiera de los ejemplos para empezar. Todo lo que debe hacer es incluir el archivo .js de SimpleModal en su página y agregar algunos estilos, y está listo para funcionar.

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