jQuery Mobile的看到Android上的黑色覆盖块 [英] JQuery Mobile seeing black overlay blocks on Android

问题描述

我目前使用创建和JQueryMobile内置的PhoneGap一个示例应用程序。它是一种简单的应用程序，没有什么特别的，它的目的是在Android平台上运行，无论是手机和平板电脑。

我有这显示一个弹出式对话框，搭配黑色/透明背景的应用程序的页面。如果用户点击了previous页面上的按钮此弹出窗口。

在其他手机和平板设备，与黑色的透明背景弹出的对话框似乎已经很好了。然而，有一个设备我测试过，如果应用程序显示了对话框弹出在其上的应用程序，也有重叠在银幕黑块。

有没有人有什么我可以做些什么来避免这个问题有什么建议？我环顾四周，看是否存在此问题，但我没有运气。大部分的设备我测试过的似乎没有这个问题，只需一台设备这个程序，但在被彻底的，我想解决这个问题。

这个问题的截图可以在以下链接中找到：

http://imgur.com/IliDsoK

我复制的HTML code，供大家参考了。

感谢。

 ＆LT; D​​IV ID =fourthPage数据角色=页面数据反加-BTN =真正的＆GT;
    ＆LT; D​​IV数据角色=头的数据位=固定ID =fourthPageHeader数据ID =主标题＆GT;
        ＆LT; H1＆GT;第四页＆LT; / H1＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV数据角色=内容＆GT;
    ＆LT; UL数据角色=列表视图ID =settingsOptionsList＆GT;
        ＆LT;立GT;＆LT; A HREF =＃confirmDialog数据相对=弹出＆GT;测试对话框＆LT; / A＆GT;＆LT; /李＆GT;
    ＆LT; / UL＆GT;
    ＆LT; / DIV＆GT;
        ＆LT; D​​IV ID =fourthPageFooter数据角色=页脚数据位=固定数据ID =主页脚＆GT;
    ＆LT; / DIV＆GT;    ＆所述;格数据角色=弹出ID =confirmDialog数据位到=窗口的数据覆盖主题=一个数据可取消=真＆GT;
        ＆LT; D​​IV数据角色=头的数据主题=A级=UI角顶＆GT;
            ＆LT; H1＆GT;测试对话框＆LT; / H1＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV数据角色=内容的数据主题=D级=UI角底UI内容＆GT;
            ＆LT; H3类=UI标题＆gt;这是测试对话＆LT; / H3 GT＆;
            ＆所述; A HREF =＃的数据角色=键的id =cancelDeleteButton数据列直插=假的数据的rel =返回数据主题=c的＆GT;确定与所述; / A＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

下面是CSS code（由下面马尔钦给出的建议）：

 的.ui页{
身高：100％重要;！
-webkit-背面能见度：隐藏;
}身体{
  溢出：隐藏;
}的.ui-对话框的背景{
背景：RGBA（0,0,0,0.5）
}的.ui-对话框的background.pop.in {
背景：RGBA（0,0,0,0.5）
}的.ui-对话框{
最小高度：100％重要;！
背景：RGBA（0,0,0,0.5）
}
 

解决方案

我能够重现您的问题。试试这个：

  div.ui的覆盖-A {
    背景色：RGBA（0，0，0，0.5）;
}
 

I currently created a sample app built using JQueryMobile and Phonegap. Its a simple app, nothing special and it is intended to run on the Android platform, both for Mobile and Tablets.

I have a page on the app which displays a popup dialog box, with a black/transparent background. This popup appears if a user clicks on a button on the previous page.

On other mobile and tablet devices, the popup dialog with the black transparent background appears to look fine. However there is one device i've tested the app on which if the app shows the popup with the dialog, there are also black blocks that overlay the screen.

Does anyone have any suggestions on what I could do to avoid this issue? I've looked around to see if this problem exists, but I've had no luck. The majority of devices i've tested this app on appear to not have this issue, just one device, but in being thorough, i'd like to fix this issue.

The Screenshot of this issue can be found on the following link:

http://imgur.com/IliDsoK

I've copied the HTML code for your reference too.

Thanks.

<div id="fourthPage" data-role="page" data-add-back-btn="true">
    <div data-role="header" data-position="fixed" id="fourthPageHeader" data-id="main-header" >
        <h1>Fourth Page</h1>
    </div>
    <div data-role="content">
    <ul data-role="listview" id="settingsOptionsList">
        <li><a href="#confirmDialog" data-rel="popup">Test Dialog</a></li>
    </ul>
    </div>
        <div id="fourthPageFooter" data-role="footer" data-position="fixed" data-id="main-footer">
    </div>  

    <div data-role="popup" id="confirmDialog" data-position-to="window" data-overlay-theme="a" data-dismissible="true">
        <div data-role="header" data-theme="a" class="ui-corner-top">
            <h1>Test Dialog</h1>
        </div>
        <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
            <h3 class="ui-title">This is the test dialog</h3>
            <a href="#" data-role="button" id="cancelDeleteButton" data-inline="false" data-rel="back" data-theme="c">OK</a>      
        </div>
    </div>  
</div>  

Here is the CSS code (with the suggestions given by Marcin below):

.ui-page {
height: 100% !important;
-webkit-backface-visibility: hidden;
}

body{
  overflow:hidden;
}

.ui-dialog-background {
background:rgba(0,0,0,0.5)
}

.ui-dialog-background.pop.in {
background:rgba(0,0,0,0.5)
}

.ui-dialog {
min-height: 100% !important;
background:rgba(0,0,0,0.5)
}

解决方案

I was able to reproduce your issue. Give this a try:

div.ui-overlay-a {
    background-color: rgba(0, 0, 0, 0.5);
}

这篇关于jQuery Mobile的看到Android上的黑色覆盖块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！