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

作者: v-star*위위
发布时间: 2025-03-27 07:21:23 (12天前)
转自：

6 条回复

0#
回复此人
岁爵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我不确定最近这是否有所改变;但我想我会为jQuery Mobile 1.1提供答案。 </p> <P> 要修复宽度所有对话框，您需要添加以下CSS规则： </p> <pre> <code> .ui-dialog-contain { max-width: 600px; } </code> </pre> <P> 如果您不想在全球范围内应用此设置，则可以使用其ID来定位单个页面/对话框，例如： </p> <pre> <code> #my-dialog .ui-dialog-contain { max-width: 600px; } </code> </pre> </DIV>

编辑
1#
回复此人
那月静好 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 除了迈克的建议之外我做了这个，背景页面是可见的，只有对话框覆盖，而不是对话框的背景。 </p> <pre> <code> .ui-dialog { min-height: 480px; background-color: transparent; background-image: none; } </code> </pre> </DIV>

编辑
2#
回复此人
夏花 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我有一个类似的问题，我需要控制对话框的大小并使非模态 - 以便后面可见背景页面。 Phil的方法效果很好，但是您需要使背景容器透明并且还使调用页面保留在DOM中并且仍然可见（从beta 2开始，DOM会自动修剪，因此从DOM中删除调用对话框的页面当你显示对话框时） </p> <P> 第一步是使包含的覆盖层透明，无论您使用何种主题，例如 </p> <pre> <code> .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; } </code> </pre> <P> 然后，为了保持调用页面可见，请确保通过添加来缓存在DOM中 <code> data-dom-cache="true" </code> 到你的调用页面，我发现你还必须覆盖显示和z-index样式（当然还有宽度），以确保它在对话框后面保持可见，例如 </p> <pre> <code> <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> <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> </div> </code> </pre> <P> 您还可以缓存DOM中的每个页面，而不是添加 <code> data-dom-cache="true" </code> 到每个页面，通过呼叫; </p> <pre> <code> $.mobile.page.prototype.options.domCache = true; </code> </pre> <P> 但这似乎很重。 </p> <P> 编辑： </p> <P> 找到另一种调整宽度/高度的方法，你可以只修改对话框的边距; </p> <pre> <code> .ui-dialog .ui-header, .ui-dialog .ui-content, .ui-dialog .ui-footer { margin-left: 100px; margin-right: 100px; } </code> </pre> <P> 你仍然需要做我提到的关于保持上一页可见的东西！ </p> </DIV>

编辑
3#
回复此人
生如夏花 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以设置对话框的页面宽度，实例： <a href="http://jsfiddle.net/bXPTd/3/" rel="nofollow"> http://jsfiddle.net/bXPTd/3/ </A> </p> <pre> <code> <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> </code> </pre> </DIV>

编辑
4#
回复此人
部落用户 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 想分享的<strong> 自RC2起更新 </强> - max-width现在默认为500px，可选择编辑默认值。这解决了您在大屏幕上遇到的问题。 <a href="http://jquerymobile.com/blog/2011/10/19/jquery-mobile-1-0rc2-released/#features" rel="nofollow"> http://jquerymobile.com/blog/2011/10/19/jquery-mobile-1-0rc2-released/#features </A> </p> <P> 此外，与迈克类似的概念，我仍在调整这一个 - 但要创建一个具有可见背景的叠加对话框，您需要1.删除背景颜色＆amp; .ui-dialog的图像2.确保调用页面显示为块2.将调用页面的不透明度设置为50％。这也（至少在Chrome 14中）解决了我自动拥有的任何z-index问题！ </p> <pre> <code> .ui-dialog{ background: none;} .inactive{ opacity: .50; display: block;} </code> </pre> <P> 不活动的是我添加到调用对话框的div的类。您需要检查以确保非活动类是否胜过默认值 <code> display: none; </code> 虽然，并可能使用一些JavaScript来添加内联样式。 </p> </DIV>

编辑

登录后才能参与评论