Search within TutorialsPark

jQuery Mobile : Popup Widget


Learn how to use jQuery Mobile Popup Widget


jQuery Mobile : PopUp Widget

A jQuery Mobile PopUp Widget is created using the attribute data-role="popup" within a div container.It creates a popup which displays the content within it.

Example: jQuery Mobile - PopUp Widget

Give it a TRY! » Note: The Button is used to trigger the popup.


jQuery Mobile : PopUp Widget with Menus

A Default standard Flip Switch created either using Checkbox or Select input has rounded corners, however the users have an option to change this using the attribute data-corners="false"

Syntax: jQuery Mobile - Flip Switches without Rounded Corners

Give it a TRY! » Note: The switch edges are no longer round, its now a sharp square edge.


jQuery Mobile : FlipSwitches with Various Sizes

The Width of the Switch to Accomodate large Labels can be increased by using CSS rules to set the width of the container of the Switch Element.

A Minified version of the switch can be created using attribute data-mini="true", it just creates a smaller version of the flipswitch.

Syntax: jQuery Mobile FlipSwitches with Various Sizes

Give it a TRY! » Note:Click on the Popup to Open Dialog or Forms


jQuery Mobile : Switches Themes and Selected States

Just like all other jQuery Mobile Widgets, the switches can also be themed using attribute data-theme, the default theme is a, users can set theme b or any other custom theme.

The Initial selected state of the switches can be set using the attribute selected, upon the option to be selected initially

Syntax: jQuery Mobile Switches Themes and Selected States

Give it a TRY! » Note:You can create custom themed switches using Themeroller application


jQuery Mobile : Positioning PopUps

The position of the pop-up can be set using

Syntax: jQuery Mobile Switches Themes and Selected States

Give it a TRY! » Note:You can create custom themed switches using Themeroller application