Crear un cuadro de diálogo JQuery Mobile

Estoy tratando de crear un cuadro de diálogo con Jquery mobile. He intentado referirme a la respuesta aceptada in this SO question pero no funcionó para mí.Crear un cuadro de diálogo JQuery Mobile

Aquí está mi código:

<div data-role="page" id="first"> 
    <!-- Code --> 
    <div id = "dialog" data-rel="dialog"> 
     <div id = "errorText"></div> 
     <button id = "closeDialog">OK</button> 
    </div> 
</div>

Y aquí es la JS para que sea (dentro de una función):

//Nothing checked. Cannot continue. Add error message to div 
$('#errorText').html("You must check the checkbox next to \"I Agree\" to continue"); 
//Open Dialog 
$('#dialog').dialog();

Cuando el código para crear el cuadro de diálogo que se alcanza no pasa nada. Sugerencias?

Fuente

2011-05-23 Stanley Cup Phil

El diálogo debe ser un div página separada que se puede cargar a través de Ajax o incluir en el código HTML. Aquí hay un ejemplo.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 
</head> 
<body> 
<div data-role="page"> 
    <div data-role="header"> 
     <h1>Sample</h1> 
    </div> 
    <div data-role="content"> 
     <p></p> 
     <p><a href="dialog.html" data-rel="dialog" data-role="button">Is this a question?</a></p> 
    </div> 
</div> 
<div data-role="page" data-url="dialog.html"> 
    <div data-role="header"> 
     <h1>Dialog</h1> 
    </div> 
    <div data-role="content"> 
     <p>Is this an answer?</p> 
    </div> 
</div> 
</body> 
</html>

Fuente

2011-05-24 07:48:13

esto no funciona para mí utilizando la versión beta. – Homer

Usted podría utilizar

$('#errorText').html("You must check the checkbox next to \"I Agree\" to continue"); 
$.mobile.changePage('dialog', 'slide', false, false);

Más información sobre http://jquerymobile.com/demos/1.0b1pre/#/demos/1.0b1pre/docs/pages/docs-navmodel.html

Fuente

2011-05-24 00:06:43 gsilvestrin

Esto funcionó para mí, desde las páginas de "locales, internos vinculados """ de http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/pages/docs-pages.html

http://jsfiddle.net/homer2/ra7Hv/

<div data-role="page" id="foo"> 
    <div data-role="header"> 
     <h1> 
      Foo 
     </h1> 
    </div><!-- /header --> 
    <div data-role="content"> 
     <p> 
      I'm first in the source order so I'm shown as the page. 
     </p> 
     <p> 
      View internal page called <a href="#bar" data-rel="dialog">bar</a> 
     </p> 
    </div><!-- /content --> 
    <div data-role="footer"> 
     <h4> 
      Page Footer 
     </h4> 
    </div><!-- /footer --> 
</div><!-- /page --> 

<!-- Start of second page --> 
<div data-role="page" id="bar"> 
    <div data-role="header"> 
     <h1> 
      Bar 
     </h1> 
    </div><!-- /header --> 
    <div data-role="content"> 
     <p> 
      I'm second in the source order so I'm not shown as the page initally. 
     </p> 
     <p> 
      <a href="#foo">Back to foo</a> 
     </p> 
    </div><!-- /content --> 
    <div data-role="footer"> 
     <h4> 
      Page Footer 
     </h4> 
    </div><!-- /footer --> 
</div><!-- /page -->

Fuente

2011-06-30 16:23:13 Homer

Si la página de diálogo está incrustada en el mismo archivo html que la página principal, entonces necesita usar la identificación del cuadro de diálogo (en este caso: #bar) para el href de anclaje del botón. De lo contrario, si usa una url, jQM intentará recuperar el diálogo utilizando AJAX, que fallaría si el diálogo no está contenido en el archivo representado por esa url. –

Sólo esto,

<div data-role="popup" id="popupDialog" data-overlay-theme="a"> 
       Hello world 
</div> 

$('#popupDialog').popup('open');

Fuente

2013-08-31 19:18:33 omeralper

lo hice un diálogo genérico que se abre desde JavaScript. Espero que esto ayude.

HTML código:

<div data-role="page" id="genericDialog"> 
    <div data-role="header" ><h3 id="genericDialogHeader"></h3></div> 
    <div data-role="content" id="genericDialogContent"></div> 
</div>

Y JavaScript código:

function openDialog (title,body) { 
    //Setting values 
    $("#genericDialogHeader").html(title); 
    $("#genericDialogContent").html(body); 
    //Showing the generic dialog 
    $.mobile.changePage("#genericDialog", { role: "dialog" }); 
}

Fuente

2016-10-08 18:03:35

Crear un cuadro de diálogo JQuery Mobile

Respuesta

Cuestiones relacionadas