使用openFrame打开frame设置为透明无效

哈里生活馆 · *发表于 2017-11-29 10:35:40*

先上代码：
         api.openFrame({
                  name: 'shoppingWindow',
                  url: './shoppingWindow.html',
                  rect: {
                     x: 0,
                     y: 0,
                     w: api.winWidth,
                     h: api.winHeight

                  },
                  pageParam: {
                     name: 'test'
                  },
                  bounces: false,
                  bgColor: 'rgba(0,0,0,0.6)'
            });

打开的时候显示透明的，然后很快一闪就变成白底的了，求助一下各位大神。

周岚 · 回复于2017-11-29 10:43:11

检查下frame中引入的css文件是否设置了html和body的背景色

哈里生活馆 · 回复于2017-11-29 10:56:12

周岚发表于 2017-11-29 10:43
检查下frame中引入的css文件是否设置了html和body的背景色

没有设置
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="../../css/api.css" />
<link rel="stylesheet" type="text/css" href="../../aui/css/aui.css" />

<style>
      body {}
</style>
</head>

<body>
<div class="aui-bar-tab">
      <div class="aui-bar aui-bar-btn " style="width:100%;" type="count">
         <div class="aui-bar-btn-item aui-font-size-20">
            <i class="aui-iconfont aui-icon-minus"></i>
         </div>
         <div class="aui-bar-btn-item">
            <input type="number" class="aui-input aui-text-center" value="1" id="count">
         </div>
         <div class="aui-bar-btn-item aui-font-size-20">
            <i class="aui-iconfont aui-icon-plus"></i>
         </div>
      </div>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../aui/script/aui-tab.js" charset="utf-8"></script>

<script type="text/javascript">
apiready = function() {
      api.parseTapmode();
};

var bar = document.querySelectorAll(".aui-bar-btn");
if (bar) {
      for (var i = 0; i < bar.length; i++) {
         var d = bar;
         console.log(d);
         var tab = new auiTab({
            element: bar,
            repeatClick: true
         }, function(ret) {
            if (ret.dom.parentNode.getAttribute("type") && ret.dom.parentNode.getAttribute("type") == "count") {
                  var count = parseInt(document.getElementById("count").value);
                  if (ret.index == 2) return;
                  if (ret.index == 1 && count > 0) {
                     document.getElementById("count").value = count - 1;
                  }
                  if (ret.index == 3) {
                     document.getElementById("count").value = count + 1;
                  }
            }
         });

      }
}
</script>

</html>

只有一个加减的输入框

周岚 · 回复于2017-11-29 11:00:52

哈里生活馆发表于 2017-11-29 10:56
没有设置

css文件里，api.css和aui.css都设置了页面的背景色。
在页面里加上这个
html,body {
background: rgba(0,0,0,0);
}

哈里生活馆 · 回复于2017-11-29 11:08:09

周岚发表于 2017-11-29 11:00
css文件里，api.css和aui.css都设置了页面的背景色。
在页面里加上这个
html,body {

还是没有效果
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="../../css/api.css" />
<link rel="stylesheet" type="text/css" href="../../aui/css/aui.css" />

<style>
html,
      body {
      background: 'rgba(0,0,0,0)';
      }
</style>
</head>

您看下是不是这样写的

铭辛 · 回复于2017-11-29 11:44:26

body {
background: 'none !important';
}

你试试

哈里生活馆 · 回复于2017-11-29 12:33:47

铭辛发表于 2017-11-29 11:44
body {
background: 'none !important';
}

还是不行，总是一闪就变成白底的了

哈里生活馆 · 回复于2017-11-29 12:45:32

铭辛发表于 2017-11-29 11:44
body {
background: 'none !important';
}

解决了，谢谢，我在html 和 body上同时加上style="background: rgba(0,0,0,0);"就可以了。

<!DOCTYPE html>
<html style="background: rgba(0,0,0,0);">

<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="../../css/api.css" />
<link rel="stylesheet" type="text/css" href="../../aui/css/aui.css" />

<style>

</style>
</head>

<body style="background: rgba(0,0,0,0);">
</body>

哈里生活馆 · 回复于2017-11-29 12:45:47

周岚发表于 2017-11-29 11:00
css文件里，api.css和aui.css都设置了页面的背景色。
在页面里加上这个
html,body {

解决了，谢谢，我在html 和 body上同时加上style="background: rgba(0,0,0,0);"就可以了。

<!DOCTYPE html>
<html style="background: rgba(0,0,0,0);">

<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="../../css/api.css" />
<link rel="stylesheet" type="text/css" href="../../aui/css/aui.css" />

<style>

</style>
</head>

<body style="background: rgba(0,0,0,0);">
</body>

[FAQ] 使用openFrame打开frame设置为透明无效

浏览过的版块