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

对话框本身只占页面的大约10％，我想删除或将对话框的页面背景变为透明，以便前一页仍然可见。

这是调用对话框的js：

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

这就是div

 
 
 
Congrats!
 
  

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

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

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

请帮忙。 非常感谢。

Answer 1

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

我的CSS顺序如下：

我的自定义CSS（post主题和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 "); }); }); 

来源： 汤姆克拉克森

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

Answer 3

我发现了这个：

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

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

Answer 4

只需将此添加到您的CSS

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

这对我行得通。