Mostrar mensajes emergentes utilizando el plugin Dialog de Jquery

Las famosas cajas de dialogo de javascript, generadas por la famosa sentencia alert(); y que sirven para mostar mensajes emergentes al usuario, tienen un diseño muy básico y encima sólo aceptan ingresar texto plano.

Trabajando en la aplicación de un cliente que contrató mi servicio de desarrollo web freelance necesité insertar un link dentro de la caja de dialogo, por lo tanto fue necesario investigar una herramienta más moderna.

Les presento el componente Dialog de la librería Jquery UI. Es muy sencillo de utilizar, sólo copiar y pegar código, y no se requieren conocimientos avanzados en Jquery.

Las instrucciones para hacerlo funcionar son muy sencillas:

1. Cargamos los .js de Jquery y su librería Jquery UI dentro de la etiquetas y de nuestro código html

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

2. Creamos en contenido del mensaje emergente dentro de un DIV y le ponemos “id”, en mi caso “mensaje”.

<div id="mensaje" title="Mensaje emergente HTML">    <p>En este mensaje emergente podemos ingresar código html :)<br><br>        Por ejemplo, letras en <b>negrita</b> o <a href="http://www.google.com/">links</a></p></div>

3. Creamos otro div y allí adentro insertamos un botón, fondo, o cualquier cosa. Cuando el usuario haga click llamaremos a la función que dispara el mensaje emergente. Le asinamos un “id”, en mi caso “disparar_mensaje”.

<div id="disparar_mensaje" style="height:30px; width:600px; background-color:blue; color:white; font-size:26px; padding:10px;">>> Click aquí para mostrar mensaje emergente</div>

4. Por último, la función Jquery. Al lado de cada sentencia, dejo comentario para explicar que hace:

    <script>    $(document).ready(function() {        $( "#mensaje" ).hide();     // Por defecto, ocultamos el DIV que contine el mensaje emergente.        $('#disparar_mensaje').click(     // Ubicamos el evento click en el botón disparar_mensaje            function(){                $( "#mensaje" ).show(); // Ponemos en visible en contenedor del mensaje                $( "#mensaje" ).dialog(); // Utilizamos el método "dialog" que disparar el mensaje emergente            }        );    });    </script>

 

You may also like...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *