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. SSH高级服务

    SSH端口转发 SSH 会自动加密和解密所有 SSH 客户端与服务端之间的网络数据.但是,SSH 还能够将其他 TCP 端口的网络数据通过 SSH 链接来转发,并且自动提供了相应的 加密及解密服务.这 ...

  2. 开发十年，只剩下这套Java开发体系了

    蓦然回首自己做开发已经十年了,这十年中我获得了很多,技术能力.培训.出国.大公司的经历,还有很多很好的朋友.但再仔细一想,这十年中我至少浪费了五年时间,这五年可以足够让自己成长为一个优秀的程序员,可惜 ...

  3. IOC解耦-面向接口编程的优点

    原文:https://blog.csdn.net/jj_nan/article/details/70161086 参考:https://www.cnblogs.com/landeanfen/p/477 ...

  4. Node.js学习看这里：基础、进阶、文章

    Node.js是基于Chrome JavaScript运行时建立的一个平台,实际上它是对Google Chrome V8引擎进行了封装,它主要用于创建快速的.可扩展的网络应用. Node.js采用事件 ...

  5. PHP面试准备

    框架:Laravel,Yii,Tp (1)纵向不同版本及框架本身特性 (2)横向对比,不同框架的优缺点 面向对象编程: (1)面向对象的基本特征:封装,继承,多态 (2)设计模式:单例模式,工厂模式, ...

  6. inbox.MoveTo Folder does not move message out of inbox

    inbox.MoveTo Folder does not move message out of inbox #160  Closed vnwind opened this issue on 14 M ...

  7. async和await用法(Task)

    原文:async和await用法 要理解async和await的用法,首先要了解Task相关知识,这里不做说明,因为这不是本文的重点. 如果你已经对Task很了解,那么如何使用async和await, ...

  8. CentOS6.5如何设置NAT网络方式

    如何设置虚拟机与外网的连通. 今天说一下NAT的配置方法,其它两个都比较简单. 1.配置CentOS的IP [root@mycentos ~]# vi /etc/sysconfig/network-s ...

  9. WebAssembly 浏览器中运行c/c++模块

    今天,要给前端造点儿福利 浏览器中能调用javascript,曾经我们以为够用了,够强大了,但是事实上是完全不够 还好,mozilla的工程师提出了webassembly,目前是利用emsctript ...

  10. 当我的url请求会变成jsp页面路径时的解决办法

    @RequestMapping(value="shippingOrder") $.post("/ezsh/orderAd/shippingOrder",para ...