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.
Copy the full code of this recipe from the code/02/custom-dialog
sources folder. You can launch this code using the URL http://localhost:8080/02/custom-dialog/main.html
.