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

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

这是调用对话框中的JS：

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

，这是我尝试使用自定义的CSS的股利

<div data-role="page" id="popdiv" data-role="page" data-theme="e">   
    <div data-role="content"> 
    <h1>Congrats!</h1> 
    </div> 
</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>

请帮忙。非常感谢。

来源

2011-10-15 Saint Dee

我发现这一点：

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

这是一个jQuery Mobile的插件，它是我真正想要。 :)

来源

2011-10-27 21:21:32

只需添加到您的CSS

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

这对我的作品。

来源

2012-02-01 20:57:41 karina

消除其他元素。 –

使对话框不是模态的，但好主意！ – Olivier

接受的答案建议使用第三方对话框为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

来源

2012-05-04 13:10:44 Junto

这个工程适用于我在添加.ui-dialog {z-index：3000;}这个解决方案之后。谢谢 –

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

来源

2013-09-17 10:36:01 Vicinzu

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

回答

相关问题