I have created app using jQuery Mobile and need to get a Dialog box when button is clicked. The Dialog box should be center aligned of the screen when i have specified the width and height of the Dialog. Please check current jsfiddle version.
Code as follows.
<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;
}
I changed the margin: 20px auto;
but no luck.
Need to know one more thing, When I Click on the button, Dialog box is appeared on the center of screen. But it loads as separete page, I mean clicked button page is removed by Dialog. How to avoid this.
Best Answer
Try to use "position: relative":