I designed an app using jQuery Mobile and I'm looking to display a Dialog box when a button is clicked. The Dialog box should be centered on the screen with specified width and height. For reference, you can view the current version on jsfiddle.
The code looks like this:
<div data-role="page" data-theme="a" id="page1">
<button data-theme="a" id="submit-button-1">Open Dialog</button>
</div>
<div data-role="page" data-theme="a" id="page2">
<div data-role="content">
<p>This is popup</p>
</div>
</div>
$('#submit-button-1').click(function() {
$.mobile.changePage($('#page2'), 'pop', false, true);
});
#page2 {
width:150px;
height:150px;
border: #f00 solid 1px;
margin:20px 100px;
}
Although I tried changing margin: 20px auto;, it didn't work as expected.
One thing that's puzzling me is that when I click on the button, the Dialog box appears in the center of the screen but as a separate page, replacing the original page. How can I prevent this from happening?