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;
}

然后为了保持调用页面可见，请确保通过将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;
}

你仍然需要做我提到的关于保持上一页可见的内容！

Answer 3

除了迈克的建议之外我做了这个，背景页面是可见的，只有对话框覆盖，而不是对话框的背景。

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

Answer 4

想分享从RC2开始更新 - max-width现在默认为500px，并带有编辑默认值的选项。这解决了大屏幕问题。http://jquerymobile.com/blog/2011/10/19/jquery-mobile-1-0rc2-released/#features

此外，与迈克类似的概念，我仍在调整这个 - 但要创建一个具有可见背景的叠加对话框，您需要1.删除背景颜色＆amp; .ui-dialog的图像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;
}

如果您不想在全球范围内应用此设置，则可以使用其ID来定位单个页面/对话框，例如：

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

我可以修复jQueryMobile对话框的宽度和高度吗？

5 个答案: