如何删除 Jquery Mobile Dialog 的页面背景？答案

【问题标题】：How to remove page background for Jquery Mobile Dialog?如何删除 Jquery Mobile Dialog 的页面背景？
【发布时间】：2011-10-15 07:36:24
【问题描述】：

对话框本身只占页面的 10% 左右，我想移除对话框的页面背景或将其变为透明，以便之前的页面仍然可见。

这是调用对话框的js：

$.mobile.changePage('#popdiv',{transition:'slide', role:'dialog'});

这是 div

<div data-role="page" id="popdiv" data-role="page"  data-theme="e">        
  <div data-role="content">
  <h1>Congrats!</h1>
  </div>
</div>

我尝试使用自定义 css，但它似乎没有任何改变

div#popdiv {
   background: none; // i also used background-image and color and set it to none
}

这就是我声明css和js的方式

<custom css>
<jquery mobile css>
<jquery min.js>
<phonegap.js>
<custom.js>
<jquerymobile.js>

请帮忙。非常感谢。

【问题讨论】：

标签： jquery mobile jquery-mobile dialog

【解决方案1】：

接受的答案建议为 jQuery Mobile 使用 第三方对话框。如果您想使用现有的内置对话框，那么以下方法将起作用：

我的 CSS 顺序如下所示：

<link rel="stylesheet" href="themeroller/mobile.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" />
<link rel="stylesheet" href="mobile-custom.min.css" />

我的自定义 CSS（帖子主题和 JQM 移动结构 CSS）：

.ui-dialog-background {
    opacity: 0.5;
    display: block !important;
    -webkit-transition: opacity 0.5s ease-in;
}

.ui-dialog-background.pop.in {
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in;
}

.ui-dialog {
    min-height: 100% !important;
    background: transparent !important;
}

页面加载时的 JavaScript：

$(function() {
    $('div[data-role="dialog"]').live('pagebeforeshow', function(e, ui) {
    ui.prevPage.addClass("ui-dialog-background ");
    });

    $('div[data-role="dialog"]').live('pagehide', function(e, ui) {
    $(".ui-dialog-background ").removeClass("ui-dialog-background ");
    });
});

来源：Tom Clarkson

【讨论】：

在将 .ui-dialog {z-index: 3000;} 添加到此解决方案后，这对我有用。谢谢

【解决方案2】：

对于 jQuery >1.9，live() 被移除。因此，您可以将 Junto 上面发布的 JavaScript 修改为以下内容：

$(document).on('pagebeforeshow', 'div[data-role="dialog"]', function (e, ui) {
    ui.prevPage.addClass("ui-dialog-background ");
});

$(document).on('pagehide', 'div[data-role="dialog"]', function (e, ui) {
    $(".ui-dialog-background ").removeClass("ui-dialog-background ");
});

【讨论】：

【解决方案3】：

我发现了这个：

https://github.com/jtsage/jquery-mobile-simpledialog

这是一个 jquery 移动插件，正是我想要的。 :)

【讨论】：

【解决方案4】：

只需将其添加到您的 css 中

.ui-mobile [data-role="dialog"], .ui-page {
display:block !important;
}

这对我有用。

【讨论】：