¿cómo hacer una ventana modal con html y css?
Diálogo modal
Como puedes ver, sólo tenemos un simple enlace que dice «Open Modal» y enlaza con nuestro div openModal que está colocado justo debajo. Estamos haciendo todo nuestro estilo aquí con las clases, por lo que utilizamos el ID sólo como un gancho para la apertura de nuestra caja modal, y vamos a estilo de todo el uso de la clase modalDialog.
A continuación, añadimos una etiqueta div que contendrá todo nuestro contenido en el cuadro modal. Dentro de este div vamos a tener un enlace para cerrar la caja que estilizaremos con nuestro CSS. A continuación, pondremos un simple encabezado con algunos párrafos de texto debajo de él. Su marcado HTML debería tener ahora este aspecto:
El código aquí es bastante simple. Estilizamos nuestro cuadro de diálogo dándole una posición fija, lo que significa que se moverá hacia abajo en la página, cuando se abra, si se desplaza. También establecemos nuestros bordes superior, derecho, inferior e izquierdo a 0 para que nuestro fondo oscuro se extienda por todo el monitor.
Como vamos a querer que el fondo alrededor de la caja modal se oscurezca cuando esté abierta, establecemos el fondo en negro, y cambiamos la opacidad ligeramente. También nos aseguramos de que nuestro cuadro modal está sentado en la parte superior de todo mediante el establecimiento de nuestra propiedad z-index.
Modalidad de imagen
Estoy teniendo algunos problemas para crear múltiples modales en una sola página web siguiendo el código de ejemplo de w3schools.com. El código en cuestión que estoy utilizando es este: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2
Sé que estoy necroando un post muerto aquí, pero me gustaría proponer una solución más limpia y mantenible. Escribí una guía en profundidad sobre cómo crear múltiples modales en una sola página en mi blog. Las explicaciones son un poco complicadas, así que si quieres entender cómo funciona este código, desgloso las cosas en detalle en ese post.
Espero que esto ayude a alguien más en el futuro. Limpié algunas inconsistencias y otras cosas menores y simplifiqué el código y los nombres de las variables, usando la sintaxis es6, etc. Probablemente alguien pueda también hacer uso del código para un solo modal. Ejemplo de estructura modal:
Ejemplo de popup modal php
Todo el contenido dentro del modal de demostración es opcional y se incluye para los propósitos de este tutorial, usted podría reemplazar con cualquier contenido que desee cuando se utiliza esto en un sitio web real. También hay un botón para activar la ventana emergente y mostrar el modelo.
Nota: Estamos construyendo esto de una manera que nos permita incluir múltiples modales en una sola página. Hacemos esto mediante el uso de atributos id / data-id coincidentes en cada modal y los correspondientes botones de apertura y cierre.
Esto es todo por este tutorial. Siguiendo este tutorial habrás aprendido a construir un modal popup sin tener que depender de ningún plugin o librería JavasScript externa. Una versión completa de este modal se puede encontrar en CodePen y el código fuente también está disponible en GitHub.
Javascript popup window
<div id=»demo-modal» class=»modal» role=»dialog» tabindex=»-1″> <div class=»model-inner»> <div class=»modal-header»> <h3>Hello World</h3> <button class=»modal-close» data-id=»demo-modal» aria-label=»Close»> × </button> </div> <p> Natus earum velit ab nobis eos. Sed et exercitationem voluptatum omnis dolor voluptates. Velit ut ipsam sunt ipsam nostrum. Maiores officia accusamus qui sapiente. Dolor qui vel placeat dolor nesciunt quo dolor dolores. Quo accusamus hic atque nisi minima. </p> </div> </div> <button class=»modal-open» data-id=»demo-modal»>Display Modal</button>
All of the content within the demo-modal is optional and included for the purposes of this tutorial, you could replace with whatever content you like when using this on a real website. There is also a button to trigger the popup and display of the model.
Note: We’re building this in a way that would allow us to include multiple modals in a single page. We do this by using matching id / data-id attributes on each modal and the corresponding open and close buttons.