我可以固定 jQueryMobile 对话框的宽度和高度吗？答案

【问题标题】：Can I fix the width and the height of jQueryMobile dialog?我可以固定 jQueryMobile 对话框的宽度和高度吗？
【发布时间】：2011-05-09 13:15:58
【问题描述】：

我可以固定 jQueryMobile 对话框的宽度和高度吗？目前，宽度的大小是 100%，这在 iPad 上真的很糟糕。

【问题讨论】：

标签： jquery jquery-mobile

【解决方案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>

【讨论】：

正确率为 50%。因为如果我这样做，覆盖不能占用屏幕 100% 的空间。它只能占用您定义的 300 像素的屏幕。我想要的是我只想修复对话框的宽度，不包括覆盖。

【解决方案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;
}

然后为了保持调用页面可见，通过将data-dom-cache="true" 添加到调用页面来确保其缓存在 DOM 中，我发现你还必须覆盖显示和 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;
}

你仍然需要做我提到的关于保持前一页可见的事情！

【讨论】：

忘了添加，为了使对话框居中，我必须设置左边距，我确信有更好的方法来做到这一点 - 但这对我有用 ;-)

【解决方案3】：

除了Mike的建议，我这样做了，背景页面是可见的，只被对话框覆盖，而不是对话框的背景。

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

【讨论】：

【解决方案4】：

想分享从 RC2 开始更新- 最大宽度现在默认为 500 像素，并且可以选择编辑默认值。这解决了您在使用大屏幕时遇到的问题。http://jquerymobile.com/blog/2011/10/19/jquery-mobile-1-0rc2-released/#features

另外，与 Mike 类似的概念，我仍在调整这个 - 但是要创建具有可见背景的叠加对话框，您需要 1. 删除 .ui-dialog 的背景颜色和图像 2. 确保调用页面显示为块 2。设置调用页面的不透明度为 50%。这也（至少在 Chrome 14 中）解决了我自动遇到的任何 z-index 问题！

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

其中 inactive 是我添加到调用对话框的 div 中的类。您需要检查以确保非活动类胜过默认的 display: none;，并且可能使用一些 javascript 来添加内联样式。

【讨论】：

太棒了！这很好用，但我发现了一个问题。它与您的修复不起作用的嵌套对话框有关。 Look Here.
对于较新版本的 jQueryMobile（我认为是 1.0 版），您现在可以向对话框页面添加覆盖主题。这允许您使用像 data-overlay-theme="q" 这样的假主题，然后在您的 CSS 中设置如下内容： .ui-overlay-q{background: none;z-index: 5;} 这不是第 1 步。

【解决方案5】：

我不确定这是否最近发生了变化；但我想我会为 jQuery Mobile 1.1 提供答案。

要固定所有对话框的宽度，您需要添加以下 CSS 规则：

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

如果您不想全局应用此设置，您可以使用其 id 定位单个页面/对话框，例如：

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

【讨论】：