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;，但没有运气。

还需要知道一件事，当我点击按钮时，屏幕中央会出现对话框。但它加载为separete页面，我的意思是点击按钮页面被Dialog删除。如何避免这种情况。

Answer 1

尝试使用“position：relative”：

margin:20px auto;
position: relative;

使用自定义宽度和高度，jQuery Mobile Dialog中心进行屏幕显示

1 个答案: