¿Cómo puedo hacer un cuadro de diálogo de jQuery Mobile que no sea de pantalla completa?

Question

Me gustaría mostrar un cuadro de diálogo que no sea de pantalla completa, es decir, "flota" sobre la página que lo abrió. Esto es lo que estoy intentando:

<div data-role="page" id='Page1'> 
    <div data-role='button' id="Button1">Open Dialog</div> 
</div> 

<div data-role="dialog" id='Dialog' 
    style='width:200px; height:100px; top:100px; left:100px;'> 
    <div data-role='button' id="Button2">Close</div> 
</div> 

<script> 

Button1.onclick = function() { 
    //$.mobile.changePage($('#Dialog')) 
    $.mobile.changePage('#Dialog',{role:'dialog'}) 
} 

Button2.onclick = function() { 
    $(".ui-dialog").dialog("close"); 
} 

Aunque establecí los límites en la ventana de Diálogo, todavía está a pantalla completa.

Answer 1

Esto es lo que ocurrió con (después de algunos grandes consejos de Jasper) :

<div data-role="page" id='Page1'> 
    <div data-role='button' id="Button1" >Open Dialog</div> 
</div> 

<div data-role="dialog" id='Dialog'> 
    <div data-role='header'id='Dialog_header'><h1>Dialog</h1></div> 
    <div data-role='button' id="Button2">Close</div> 
</div> 

<script> 

Dialog_header.onclick= function(e){ 
    $("#Dialog").fadeOut(500); 
} 

Button1.onclick = function(e) { 
    var $dialog=$("#Dialog"); 
    if (!$dialog.hasClass('ui-dialog')) 
    {$dialog.page()}; 
    $dialog.fadeIn(500); 
} 

Button2.onclick = function() { 
    $("#Dialog").fadeOut(500); 
} 

Button2 es una ventaja: muestra cómo cerrar el diálogo desde el código.

Puede jugar con él aquí: http://jsfiddle.net/ghenne/Y5XVm/1/

Answer 2

Puede forzar una anchura del diálogo como este:

.ui-mobile .ui-dialog { 
    background : none !important; 
    width  : 75% !important; 
}​ 

Aviso También elimina el fondo por lo que el diálogo puede aparecer en la parte superior de la otra página. El único problema que queda es que cuando navega hacia el diálogo, la otra página se oculta para que el cuadro de diálogo aparezca encima de un fondo blanco.

Aquí es una demostración: http://jsfiddle.net/jasper/TTMLN/

Este es un punto de partida para usted, creo que la mejor manera de crear su propia ventana emergente es mostrar de forma manual/ocultar el diálogo de manera jQuery Mobile no oculta la antigua página .

actualización

Por supuesto que puede utilizar un cuadro de diálogo como una ventana emergente con una pequeña cantidad de código personalizado:

$(document).delegate('#dialog-link', 'click', function() { 

    var $dialog = $('#dialog'); 
    if (!$dialog.hasClass('ui-dialog')) { 
     $dialog.page(); 
    } 
    $dialog.fadeIn(500); 

    return false; 
});​ 

Dónde dialog-link es el ID del enlace que abre el cuadro de diálogo como una ventana emergente.

Aquí es una ligera actualización de la CSS para centrar el modal horizontal:

.ui-mobile .ui-dialog { 
    background : none !important; 
    width  : 75% !important; 
    left  : 50% !important; 
    margin-left : -37.5% !important; 
}​ 

Y aquí es una demostración: http://jsfiddle.net/jasper/TTMLN/1/

Answer 3

aquí es un plugin que u puede use..this plugin también es personalizable con ur propio código HTML.

simpleDialogue plugin for jquery mobile