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. mongodb studio 3t 破解无限使用脚本

    @echo off ECHO 重置Studio 3T的使用日期...... FOR /f "tokens=1,2,* " %%i IN ('reg query "HKEY ...

  2. C# install-package:"xx"已拥有为“xxx”定义的依赖项

    可能 nuget自身的版本落后于适配程序包的版本 Visual Studio 2013 更新 NuGet 包管理器 Ø  前言 使用 Visual Studio 中的 NuGet 包管理器下载程序时, ...

  3. 20165236 2017-2018-2 《Java程序设计》第八周学习总结

    20165236 2017-2018-2 <Java程序设计>第八周学习总结 一.第十二章教材内容总结: 1.Java的多线程机制: 多线程是指一个应用程序中同时存在几个执行体,按几条不同 ...

  4. 图片在IE8浏览器多一个有边框问题解决办法

    最后在网上找了一下答案,IE8浏览器图片多一个有色边框,而Chrome浏览器没有边框的解决办法.   指定img的边框样式:   img{border-style:none;}

  5. mybatis test条件判断 如何引用 传入的 list参数中的map中的值

    <select id="query" resultType="map"> select * from ${tbName} <where> ...

  6. Mac上安装PHP、Apache、MySQL

    Mac自带php5.6版本,要升级到php7.3 步骤如下 1,brew 安装php ,如果没有安装,访问https://brew.sh/index_zh-cn安装在终端输入以下内容,不用指定安装ph ...

  7. centos 打包报错Can't connect to X11 window server using ':0.0' as the value of the DISPLAY variable.

    参考: https://blog.csdn.net/salonzhou/article/details/8990237https://stackoverflow.com/questions/23358 ...

  8. [LeetCode] 374. Guess Number Higher or Lower_Easy tag: Binary Search

    We are playing the Guess Game. The game is as follows: I pick a number from 1 to n. You have to gues ...

  9. log4j.properties配置详解与实例-全部测试通过[转]

    最近使用log4j写log时候发现网上的写的都是千篇一律,写的好的嘛不全,写的全一点的嘛没有一点格式,看着累.这里把网上收集到的整理了一下,并且全部都在机器上测试成功了.这么好的文档估计没有了吧? # ...

  10. 时间序列模式（ARIMA）---Python实现

    时间序列分析的主要目的是根据已有的历史数据对未来进行预测.如餐饮销售预测可以看做是基于时间序列的短期数据预测, 预测的对象时具体菜品的销售量. 1.时间序列算法: 常见的时间序列模型; ​ 2.时序模 ...