使用自定義寬度和高度，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;