Menu
I have a toolbar in jquery mobile, made up of a bunch of links, which load "pop" modal dialog boxes on top of my javascript application.
Like this:
Where the div with id="about" has a data-role="page". I'd like to open the same dialog from the code, perhaps as part of a button handler, but I can't find any way to do this.
This code does not work. It only shows the elements of the "about" page transparently ontop of my currect page (without styling). How do I do this?
$("#buttAbout").click(function () {
$('#about').show();
return false;
});
216
By default, popups open centered vertically and horizontally over the element you clicked (the origin) which is good for popups used as tooltips or menus. If a popup should appear centered within the window instead of over the origin, add the data-position-to attribute to the link and specify a value of window .
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. Moreover, in popup. html, you need to change data-role=page" to data-role="popup in order to treat it as a popup not a page.
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.
jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. It is built on the rock-solid jQuery and jQuery UI foundation, and offers Ajax navigation with page transitions, touch events, and various widgets.
It looks like jQuery mobile's dialogs are quite different to jQuery UI. This should do what you want:
$.mobile.changePage('#about','pop',false,true)
The documentation for changePage is here. Basically, the first argument is the string to find the page you want (can be an element id, jQuery object, or a page URL), second argument is the page transition, third is the direction of the transition (false for forwards, true for backwards), and the final argument is whether you want the page URL to update after the transition. I think you'll also need to make sure that the data-role attribute is correctly set to dialog on the div for your dialog, in order to ensure the correct history/styling behaviour.
96
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
