Question

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.

Answer 1

Try to use “position: relative”:

margin:20px auto;
position: relative;