如何删除Jquery Mobile Dialog的页面背景?

前端之家收集整理的这篇文章主要介绍了如何删除Jquery Mobile Dialog的页面背景?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
对话框本身只占页面的大约10%,我想删除或将对话框的页面背景变为透明,以便前一页仍然可见.

这是调用对话框的js:

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

这就是div

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

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

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

这就是我宣布css和js的方式

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

请帮忙.非常感谢.

解决方法

接受的答案建议使用jQuery Mobile的第三方对话框.如果要使用现有的内置对话框,则以下内容将起作用:

我的CSS顺序如下:

@H_404_4@<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):

@H_404_4@.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:

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

资料来源:@L_502_0@

猜你在找的jQuery相关文章