我可以修復jQueryMobile對話框的寬度和高度嗎？

Question

我可以修復jQueryMobile對話框的寬度和高度嗎？目前，寬度的大小是100％，這在iPad中真的很糟糕。

Answer 1

您可以設置對話框的頁面寬度，活生生的例子：http://jsfiddle.net/bXPTd/3/

<div data-role="page" id="bar"> 
    <a href="#foo" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a> 

</div> 

<div data-role="page" id="foo" style="width:300px;"> 
    Hello Foo 
    <a href="#" data-role="button" data-rel="back">Close dialog</a> 
</div> 

Answer 2

我有一個類似的問題，我需要控制一個對話框的大小，使非模態 - 這樣的背景頁面在後面可見。 Phil的方法效果很好，但是你需要使背景容器透明並且使調用頁面保持在DOM中並且仍然可見（從beta 2開始，DOM會自動修剪，以便從DOM中移除調用該對話框的頁面當你顯示對話框時）

第一步是使包含覆蓋層透明，無論你使用什麼主題，例如

.ui-body-a, 
.ui-body-a input, 
.ui-body-a select, 
.ui-body-a textarea, 
.ui-body-a button { 
    background-color: transparent; 
    font-family: Helvetica, Arial, sans-serif; 
} 

然後繼續調用頁面可見，確保其在DOM緩存加上data-dom-cache="true"你調用頁面，我發現你也不得不重寫顯示和z-index的風格（當然寬度），以確保它保持可見並在對話框後面，例如

<div id='homePage' data-role="page" data-theme='a' data-dom-cache="true" style='display:block !important;z-index: 0;width:300px'> 

    <div data-role="header" data-theme='a'><h1>Header</h1></div><!-- /header --> 

    <div data-role="content" data-theme='a' style='margin:0; padding: 0'> 
     <a href="#testdialog" data-role="button" data-rel="dialog" data-transition="pop">Open Dialog</a> 
    </div><!-- /content --> 

</div><!-- /page --> 

您也可以緩存在每一頁的DOM，而不是增加data-dom-cache="true"的每一頁，通過調用;

$.mobile.page.prototype.options.domCache = true; 

但這似乎很重。

編輯：

發現了另一種可能的方式來調整寬度/高度，你可以修改對話框的邊緣;

.ui-dialog .ui-header, 
.ui-dialog .ui-content, 
.ui-dialog .ui-footer { 
    margin-left: 100px; 
    margin-right: 100px; 
} 

你仍然需要做我提到關於保持前一頁面看到背後的東西！

Answer 3

我在Mike的建議之外做了這個，後臺頁面是可見的，只有對話框覆蓋，而不是對話框的背景。

.ui-dialog { 
    min-height: 480px; 
    background-color: transparent; 
    background-image: none; 
} 

Answer 4

想到分享更新爲RC2的 - 最大寬度現在默認爲500像素與編輯默認的選項。這解決了您使用大屏幕時遇到的問題。 http://jquerymobile.com/blog/2011/10/19/jquery-mobile-1-0rc2-released/#features

此外，類似的概念作爲邁克，我仍然調整這一個 - 但要創建一個可見的背景覆蓋對話框，你需要1.刪除.ui對話框的背景顏色& 2。確保調用頁面顯示爲塊2.將調用頁面的不透明度設置爲50％。這也（至少在Chrome 14中）解決了我自動執行的任何z-index問題！

.ui-dialog{ background: none;} 
.inactive{ opacity: .50; display: block;} 

其中inactive是我添加到調用對話框的div中的類。您需要檢查以確保不活動的課程優先於默認display: none;，並且可能使用一些JavaScript添加內聯樣式。

Answer 5

我不知道這是否最近發生了變化;但我想我會爲jQuery Mobile 1.1提供一個答案。

要解決的寬度所有的對話框，你需要添加下面的CSS規則：

.ui-dialog-contain { 
    max-width: 600px; 
} 

如果你不想gobally應用此設置，您可以指定單獨的頁/對話框，它的id如：

#my-dialog .ui-dialog-contain { 
    max-width: 600px; 
}