使用自定义宽度和高度，jQuery Mobile对话框中心屏幕

Question

我已经使用jQuery Mobile创建了应用程序，并且需要在单击按钮时获取对话框。当我指定对话框的宽度和高度时，对话框应该与屏幕居中对齐。请检查当前的jsfiddle版本。

代码如下。

<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; 
} 

我改变了margin: 20px auto;但没有运气。

需要知道一点，当我点击按钮时，屏幕中心出现对话框。但它加载为分离页面，我的意思是点击按钮页面被对话框删除。如何避免这一点。

Answer 1

尝试使用“位置：亲属”：

margin:20px auto; 
position: relative;