Can I fix the width and the height of jQueryMobile dialog?

Question

Can I fix the width and the height of jQueryMobile dialog? Currently, the size of width is 100% which is really awful in iPad.

Answer 1

Thought to share Update as of RC2- max-width is now defaulted to 500px with an option to edit the default. This addresses the issue you were having with large screens.http://jquerymobile.com/blog/2011/10/19/jquery-mobile-1-0rc2-released/#features

Also, similar concept as Mike, and I'm still tweaking this one- But to create an overlay dialog with a visible background you need to 1. remove the background color & image of the .ui-dialog 2. Make sure the calling page display is block 2. Set the opacity of the calling page to 50%. This also (at least in Chrome 14) resolved any z-index issues I was having automatically!

.ui-dialog{ background: none;}
.inactive{ opacity: .50; display: block;}

Where inactive is a class I added to the div where the dialog was called from. You'll need to check to make sure the inactive class is trumping the default display: none; though, and possibly use some javascript to add inline styling.