如何删除 Jquery Mobile 对话框的页面背景?

发布于 2024-12-10 04:39:43 字数 750 浏览 0 评论 0原文

对话框本身仅占据页面的 10% 左右,我想删除对话框的页面背景或将其变为透明,以便上一页仍然可见。

这是调用对话框的 js:

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

这是

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

我尝试使用自定义 css 的 div,但它似乎没有改变任何内容

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>

请帮忙。非常感谢。

The dialog itself only occupies about 10% of the page and I wanted to remove or turn the dialog's page background into transparent so that the previous page will still be visible.

This is the js that calls the dialog:

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

and this is the div

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

I tried using custom css but it doesn't seem to change anything

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

and this is how i declared the css and js

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

Please help. many thanks.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

请叫√我孤独 2024-12-17 04:39:43

接受的答案建议为 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 ");
    });
});

源:汤姆·克拉克森

The accepted answer suggests using a third party dialog for jQuery Mobile. If you want to use the existing inbuilt dialog, then the following will work:

My CSS order looks like this:

<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" />

My custom CSS (post theme and JQM mobile structure 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;
}

And JavaScript when page loads:

$(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 ");
    });
});

Source: Tom Clarkson

冷了相思 2024-12-17 04:39:43

对于 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 ");
});

For jQuery >1.9, live() is removed. Thus you habe to modify the JavaScript that Junto has posted above to following:

$(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 ");
});
如日中天 2024-12-17 04:39:43

我发现了这个:

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

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

I have found this:

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

This is a jquery mobile plugin and it's what I exactly want. :)

十六岁半 2024-12-17 04:39:43

css 中即可。

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

只需将其添加到对我有用的

Just add this to your css

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

That works for me.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文