Abrir diálogo con jQuery

Name: Abrir diálogo con jQuery
Brand: Jose Aguilar
SKU: joseaguilarblog-608
Availability: InStock
Rating: 5 (4 reviews)

Un diálogo es una ventana flotante que contiene una barra de título y un área de contenido. La ventana de diálogo se pueden mover, cambiar de tamaño y se cierra con el icono de la ‘x’ por defecto.

Si la longitud del contenido excede la altura máxima, una barra de desplazamiento aparecerá automáticamente.

Una barra de botones inferior y semi-transparente capa de superposición modal son opciones comunes que se pueden agregar.

Para aplicar lo siguiente a tu página Web debes primero introducir dentro de la etiqueta <head> las llamadas a los scripts jquery y añadir la siguiente función por ejemplo:

<script type="text/javascript">
function VerCondiciones() {

     $("#dialog").dialog({ show: "blind",
			  hide: "blind",
			  width: 500
		  });
		}
</script>

En algún lugar del <body> deberíamos tener el link que ejecute esta función:

<a onclick="VerCondiciones();">Abrir diálogo</a>

Y finalmente deberemos generar el código HTML que irá dentro del cuadro de diálogo.

<div id="dialog" style="display: none;" title="T&iacute;tulo del popup">
	<div style="width: 460px; height: 190px;" id="int_dialog">
		<div style="text-align: justify; font-size: 13px; width: 450px;">
			Texto de ejemplo<br>
			Texto de ejemplo<br>
			Texto de ejemplo<br>
			Texto de ejemplo<br>
			Texto de ejemplo<br>
		</div>
	</div>
</div>

Ver ejemplo en funcionamiento

Autor

Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.

Te ha servido? Valora esta entrada!

(4 votos, promedio: 5 de 5)

Comparte en las redes sociales

¿Buscas trabajo de programador?

8 respuestas a “Abrir diálogo con jQuery”

Roberto dice:

22/12/2020 a las 21:42

Muchas gracias excelente aporte saludos desde Chimbote-Peru!!!

Responder
Adan dice:

21/02/2013 a las 17:07

Buenas tardes, ¿podrías decirnos como lo añades a la web? No se donde meter este código:

Abrir diálogo

Hago clic en el enlace y no hace la función que debería según tu ejemplo.

Gracias de antemano

Responder
- Jose Aguilar dice:
  
  22/02/2013 a las 16:36
  
  fijate bien en los jquery que estés cargando en el puedes ver el código fuente del ejemplo en funcionamiento
  
  Responder
wilfran dice:

15/02/2013 a las 13:05

hola buenos dias mira por casualidad hay una forma de ponerle un botón de aceptar o algo así, y bueno que cuando uno suba la pagina siempre se quede en frente ….

Responder
- Jose Aguilar dice:
  
  16/02/2013 a las 8:38
  
  Hola,
  
  POsiblemente te pueda ir mejor otra opción como las de la siguiente lista:
  
  http://www.jose-aguilar.com/blog/tag/popups/
  
  saludos
  
  Responder
Mathilde Holpp dice:

03/02/2012 a las 7:46

Dead pent subject matter, thankyou for selective information .

Responder
walter dice:

30/12/2011 a las 14:47

Lo único q le falto es que tendría q haber un download…pero igual esta bien 😉

Responder
walter dice:

30/12/2011 a las 14:44

muy buen aporte!!!
gracias me sirvió para un proyecto en asp…

Responder