jquery - 使用自定义宽高，jQuery Mobile Dialog center to screen

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

尝试使用“position:relative”:

margin:20px auto;
position: relative;