对话框本身只占页面的大约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的第三方对话框.如果要使用现有的内置对话框,则以下内容将起作用：
我的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" />
.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',ui) {
$(".ui-dialog-background ").removeClass("ui-dialog-background ");
});
});
资料来源：Tom Clarkson
