2012-04-13 19 views
14

im usando jquery mobile. Estoy tratando de crear una ventana emergente. Encontré este código simpel que debería funcionar. http://jquerymobile.com/branches/popup-widget/docs/pages/popup/index.htmljquery mobile popup no funciona?

He probado el código en el ejemplo

<a href="#popupBasic" data-rel="popup">Tooltip</a> 

<div data-role="popup" id="popupBasic"> 
    This is a completely basic popup, no options set. 
</div> 

pero cuando pongo esto en mi propio código de la div seguirá mostrando y cuando hago clic en el botón que se va a otra página, en lugar de una surgir. ¿Alguien me puede ayudar?

+0

échale un vistazo a esto, el sitio web en sí tiene algún problema con las ventanas emergentes http://jquerymobile.com/branches/popup /docs/pages/popup/index.html – Dhiraj

+0

¿cómo llegaste allí? Estás en la página incorrecta Este es el enlace: http://jquerymobile.com/branches/popup-widget/docs/pages/popup/index.html – Chanckjh

Respuesta

5

Bueno ... He conseguido que funcione (código de muestra a continuación, perdón por la cadena confusa que no pude ver en los bloques de código) ... pero me pregunto cómo encontraste ¿¿esta página?? Esto no parece ser parte del último candidato de lanzamiento de jQuery Mobile ... así que supongo que no funciona para usted porque sus referencias JS y CSS no apuntan a los archivos que realmente contienen el código correspondiente.

<!DOCTYPE html> 
<html class="ui-mobile-rendering"> 
    <head> 
     <meta charset="utf-8"/> 
     <meta name="viewport" content="width=device-width, initial-scale=1"/> 
     <title>JQM popup test</title> 
     <link rel="stylesheet" 
      href="http://jquerymobile.com/branches/popup-widget/css/themes/default/jquery.mobile.css"/> 
     <script src="http://jquerymobile.com/branches/popup-widget/js/jquery.js"></script> 
     <script src="http://jquerymobile.com/branches/popup-widget/js/"></script> 
    </head> 
    <body> 
     <a href="#popupBasic" data-rel="popup">Tooltip</a> 
     <div data-role="popup" id="popupBasic">This is a completely basic popup, no options set.</div> 
     <div>Other</div> 
     <div>Random</div> 
     <div>Text</div> 
    </body> 
</html> 
+0

¿No es un lanzamiento oficial? Encontré a través de Google, por supuesto. Cuando solo pongo el guión en la cabeza. Fui a otra página, pero todo fue un desastre. Tu código funcionó, pero no creo que funcione con varias páginas. Si no es un lanzamiento oficial, tendré que encontrar otra forma de hacer una ventana emergente. ¿Cómo? – Chanckjh

+0

Sí ... parece que jQuery Mobile 1.1 ha pasado de ser un candidato de lanzamiento a "final", y esta función no está incluida: http://jquerymobile.com/demos/1.1.0/#/demos/1.1.0/ docs/pages/index.html ... para que pueda usar la función de diálogo explicada en http://jquerymobile.com/demos/1.1.0/#/demos/1.1.0/docs/pages/page-dialogs. html (pero eso oculta todos los contenidos de la página original y probablemente no sea lo que usted quiere. He estado usando un complemento que podría serle útil, http://dev.jtsage.com/jQM-SimpleDialog/demos2/ – user1263226

+0

Y Por cierto, el código que mostré debería funcionar para varias páginas también ... siempre y cuando haga referencia a esos archivos "no oficiales" de JS y CSS – user1263226

4

Parece ventanas emergentes están programadas para versión 1.2 (ver this page on github). Creo que las "ramas" en la página url indican que esta página pertenece a la rama de desarrollo no publicada de jQuery mobile. Si mira la página de documentos para la versión 1.1, esta característica no está documentada.

Se puede agregar a 1.0 agregando el jquery.mobile.popup.js y el css del enlace github anterior o el web-ui-fw project que incluye el widget emergente y otros widgets.

Uso web-ui-fw para tener ventanas emergentes con jQuery mobile 1.1; este complemento utiliza "popupwindow" en lugar de "popup" para la función data-rel y data-role

+0

Intenté agregar tanto .css como .js, pero no funcionó. ¿Funcionó para ti? –

+0

sí funciona usando web-ui-fw-libs.js, web-ui-fw.js y web-ui-fw-widget.css. usaste popupwindow en lugar de popup para data-rel y data-role? – QuickFix

+0

Quise decir que usar jquery-mobile popup .js/.css no funcionó. Usar web-ui-fw funcionó :-). –