Menu
I need a pop up dialog box for my jQuery mobile app. I found this plug in:
http://dev.jtsage.com/jQM-SimpleDialog/
Which is awesome -- doing exactly what I need, but for one detail -- it doesn't work correctly on the Android browsers I tried it on (all I get is a blank screen.) I suspect that the developer only tested on iPhone (perhaps an iPhone user could confirm if it works or not.)
Does anyone know of either a fix, or an alternative plug in that does the same sort of thing?
479
To create a popup, add the data-role="popup" attribute to a div with the popup contents. Then create a link with the href set to the id of the popup div, and add the attribute data-rel="popup" to tell the framework to open the popup when the link is tapped. A popup div has to be nested inside the same page as the link.
Use . load() to load popup. html into a placeholder (i.e <div id="PopupPH"> ). This placeholder can be placed either inside data-role="page or outside it, depending on jQuery Mobile version you are using.
There are two steps to using a DIV as a popup box. First, you must create the DIV on your page (it can be invisible to start). Second, you need a script function to make the DIV appear & disappear and change it's contents and location. Click on the button to answer the questions.
If you are simply displaying information (no need for callback/response events) you can create a popup in this manner:
<script type="text/javascript">
$("<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h1><strong>Thank you, we have received your information.</strong></h1></div>")
.css({ "display":"block", "opacity":0.96, "top": $(window).scrollTop() + 100 })
.appendTo( $("body") )
.delay( 2500 )
.fadeOut( 400, function(){
$(this).remove();
});
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
