我可以修复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; 
}