Abrir Dialogs JQuery Mobile desde JavaScript

Para esta ocasión estaremos hablando un poco de JQuery Mobile un sistema de Interfaz de usuario UI, que nos permite desarrollar aplicaciones Web Híbridas que se adapten casi a cualquier dispositivo, la funcionalidad en la cual nos centraremos será en poder abrir Dialogs o diálogos desde nuestro código JavaScript apoyándonos en JQuery para realizar dicha acción, veamos:

Como abrir dialogs JQuery Mobile

<div data-role="dialog" id="MyDialog" data-overlay-theme="a" data-theme="f">
 <div data-role="header" data-theme="f" class="ui-corner-top">
 <h1>Listado</h1>
 </div>
 <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">

 <!-- Contenido del dialogo -->

</div>
</div>

El código anterior nos  ayudaría a construir un dialogo como el siguiente.

Hacer el llamado a nuestro dialog desde JavaScript

Para realizar el llamado de nuestro dialog (mostrar) debemos definir en que momento se realizará (Puede ser al pulsar un botón), veamos el código JavaScript.

<button id="BtnIniciar">Iniciar Sesión</button>

 $("#BtnIniciar").click(function() {
 $.mobile.changePage("#MyDialog",
 {role: "dialog",
 transition: "slidedown"
 }
 );
 });

Con el código anterior logramos mostrar nuestro dialog al hacer click en el botón iniciar sesión, también cabe recalcar que se pueden utilizar varios efectos o transiciones como:

Fade, Pop, Flip, Turn, Flow, SlideFade, Slide, SlideUp, SlideDown.