APIClound 弹出层 Frame

api.openFrame({
                     name: 'showPic',
                     url: './showPic.html',
                     rect: {
                        //  x: api.pageParam.marginBottom,
                        //  y: api.pageParam.marginTop + api.pageParam.marginBottom,
                        //  w: api.winWidth - api.pageParam.marginBottom * 2,
                        //  h: api.winHeight - api.pageParam.marginTop - api.pageParam.marginBottom * 3
                        x: 0,
                        y: 0,
                        w: api.winWidth,
                        h: api.winHeight
                     },
                     pageParam: {
                         params: params
                     },
                     bounces: false,
                     bgColor: 'rgba(34,34,34,0.7)',
                     vScrollBarEnabled: false,
                     hScrollBarEnabled: false
                 });

showPic.html

<body>
  <div class="main">
    <img id="face" src="" /><br />
    <img id="back" src="" /><br />
    <div id="btn">关闭</div>
  </div>
</body>

css

html, body {
    background-color: transparent !important;
    overflow: hidden;
    width: 100%;
    height: 100%;
    font: normal 100% Helvetica, Arial, sans-serif;
    text-align: center;
    padding-top: 1em;
}
#main{

}
#face,#back{
  width: 18em;
  height: 18em;
}
#btn {
    background-color: #4363ab;
    color: #fff;
    text-align: center;
    padding: 0.5rem 1rem;
    width: 80%;
    border-radius: 0.2rem;
    margin: 2rem auto;
    font-weight: 600;
    font-size: 1.2rem
}