Cómo cerrar y superponer el cuadro de diálogo modal de jQuery Mobile?

Question

cuadro de diálogo a través de jQuery alfa móvil 4 que muestran con el Ajax como:

Dentro del éxito de devolución de llamada:

success: 
$j('#wchkdiv').html(msg); 
$j("#wchkdiv").dialog(); 
$.mobile.changePage($('#wchkdiv'), 'pop', false, true); 

Por encima de código hace que el cuadro de diálogo para la transición muy bien en su aspecto cuando algún texto en la página HTML es hizo clic en (no en la etiqueta de anclaje) a la que javascript vincula el evento de clic.

Ahora dentro del diálogo Tengo un código como:

<form id="gform" name="gform" class="formbody" method="post"> 
<input class="btns" type="button" onclick="return wchkSubmit(event,'tryAgain');" 
    name="tryAgain" value="Try Again"/> 
</form> 

Cuando intento otra vez se hace clic en el botón, tengo que manejar esto a través de JavaScript que debería hacer el cierre de diálogo (entre otras cosas que tiene que hacer), y la página de contenido que se mostraba antes de mostrarse el cuadro de diálogo ahora se muestra nuevamente. Eso significa que no debe causar ninguna recarga de página y el cuadro de diálogo no debe formar parte del historial de navegación.

Sería otra gran ventaja si me puede mostrar cómo puedo hacer que el diálogo móvil jquery aparezca en parte de la pantalla superponiéndose a la página html con el contenido de la página html atenuado o algún tipo de efecto de transparencia? Actualmente, el Diálogo ocupa toda la pantalla.

Answer 1

Ejemplo vivo: http://jsfiddle.net/ReMZ6/4/

HTML

<div data-role="page" data-theme="c" id="page1"> 
    <div data-role="content"> 
     <p>This is Page 1</p> 
     <button type="submit" data-theme="a" name="submit" value="submit-value" id="submit-button-1">Open Dialog</button> 
    </div> 
</div> 

<div data-role="page" data-theme="a" id="page2"> 
    <div data-role="content"> 
     <p>This is Page 2</p> 
     <button type="submit" data-theme="e" name="submit" value="submit-value" id="submit-button-2">Close Dialog</button> 
    </div> 
</div> 

JS

$('#submit-button-1').click(function() { 
    $.mobile.changePage($('#page2'), 'pop', false, true); 
}); 

$('#submit-button-2').click(function() { 
    alert('Going back to Page 1'); 
    $.mobile.changePage($('#page1'), 'pop', false, true); 
}); 

Answer 2

No estoy totalmente positivo que seguir lo que está tratando de hacer, pero, para cerrar el diálogo a través de JavaScript, todo lo que necesita hacer es llamar:

$j("#wchkdiv").dialog('close'); 

En cuanto a la toma de la ventana emergente de diálogo en la misma "página", supongo que se refiere al comportamiento de las listas de selección jQM? Si es así, según mi leal saber y entender, no es posible. Para ese fin, realmente escribí mi propia versión del diálogo, la demostración se puede encontrar aquí: http://dev.jtsage.com/jQM-SimpleDialog/

Si me olvidé por completo del asunto, por favor lo sé y veré si puedo agregar algo de información.

Answer 3

Lo más parecido a lo que estás buscando es probablemente de jtsage jquery-mobile-SimpleDialog

http://dev.jtsage.com/#/jQM-SimpleDialog/

HTML:

<p>You have entered: <span id="dialogoutput"></span></p> 
<a href="#" id="dialoglink" data-role="button">Open Dialog</a> 

JavaScript:

$('#dialoglink').live('vclick', function() { 
    $(this).simpledialog({ 
    'mode' : 'string', 
    'prompt' : 'What do you say?', 
    'buttons' : { 
     'OK': { 
     click: function() { 
      $('#dialogoutput').text($('#dialoglink').attr('data-string')); 
     } 
     }, 
     'Cancel': { 
     click: function() { return false; }, 
     icon: "delete", 
     theme: "c" 
     } 
    } 
    }) 
}) 

Answer 4

encontré $('.ui-dialog').dialog('close'); trabaja para cerrar un diálogo a través de un JS.

Y, $.mobile.changePage('#pageID', {transition: 'pop', role: 'dialog'}); para mostrar el cuadro de diálogo POP.