JS

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:;

    font-size: 1.2rem

}

APIClound 弹出层 Frame的更多相关文章

  1. 弹出层在兼容模式和IE8模式下显示不正常

    弹出层在火狐.谷歌.360极速模式.IE6下都能100%面积正常显示,但在IE8和360的兼容模式下只显示弹出层下半部分或右半部分的内容,在主页面加上: <meta http-equiv=&qu ...

  2. Js弹出层，弹出框代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Layer组件多个iframe弹出层打开与关闭及参数传递

    一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...

  4. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  5. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  6. 弹出层layer的使用

    弹出层layer的使用 Intro layer是一款web弹层组件,致力于服务各个水平段的开发人员.layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为 ...

  7. zepto弹出层组件

    html: <!DOCTYPE html> <html> <meta charset="utf-8"> <title></ti ...

  8. 关于淘宝店铺装修弹出层popup的记录

    小龙最近做了一下下淘宝的店铺装修,里面封装的widget深不见底,刚刚整明白popup,也就是弹出层的使用方法,大神勿喷: <div class="area001">触 ...

  9. Fancybox丰富的弹出层效果

    Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片 ...

随机推荐

  1. 小程序-formdata传参

    项目背景,后端接口要求formData传参: 在util.js文件中封装转化函数,代码如下: const formatTime = date => { const year = date.get ...

  2. Build a Basic CRUD App with Vue.js and nodejs

    https://developer.okta.com/blog/2018/02/15/build-crud-app-vuejs-node#add-authentication-with-okta I’ ...

  3. 基于nodejs的 本地文件夹http服务器：http-server

    请记住,是文件夹服务器 $ npm install http-server -g $ cd /tmp && http-server 或: $ http-server /tmp

  4. android studio 设置安装不占用C盘

    我们知道,android studio 安装会占用大量的空间,比如我们我们将andriod status 安装到了D:\IDE\Android Studio这里,但是你会发现,在编译出包过程中,C盘的 ...

  5. js并归排序的思路

    并归排序,就是分而治之,将长的数组分解为短的数组,一直分到最后,单个单个数组,我们就认为,只有一个元素的数组是有序的.然后再逐个的合并 1.拆分: 很容易 例如数组  [ 2,4,3,5,1,6,8, ...

  6. Linux系统文件目录

    下面的示例是我个人的亚马逊云服务器,查看了几个关键目录的文件信息. 可以注册一个账号,免费试用一年,自己用来玩,还是很不错的 .https://aws.amazon.com/cn/ec2/ 根目录下面 ...

  7. vue--postcss插件

     vue-loader里的postcss插件会帮你抹平浏览器兼容的写法

  8. bootstrap ui

    附加访问地址:http://www.bootcss.com/p/jquery-ui-bootstrap/

  9. springboot的默认访问路径

    注意:默认配置的/**映射到/static(或/public ,/resources,/META-INF/resources) 当请求/index.html的时候,Spring MVC 会在/stat ...

  10. WinSock学习笔记

    Socket(套接字)◆先看定义: typedef unsigned int u_int; typedef u_int SOCKET; ◆Socket相当于进行网络通信两端的插座,只要对方的Socke ...