O'Reilly logo

jQuery Mobile Cookbook by Chetan K Jain

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Custom styling a dialog

You can style a page as a dialog by using the data-role="dialog" attribute on the page container. You can also specify the data-rel="dialog" attribute in the anchor link used to open the page. The page now gets styled as a dialog, and opens with a pop transition. When you add a header to the dialog, a close icon is created on the header, by default, in the left side of the header. In some applications/platforms, you might want to position this close button on the right side of the header. There is no ready option available to change this icon's position. This recipe shows you how to build a dialog with a custom styled header to position the close button at the right side of the header.

Getting ready

Copy the full code of ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required