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

  1. <div class="area001">触发区域</div>
  2. <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
  3. 'trigger':'.area001',
  4. 'align':{
  5. 'node':'.area001',
  6. 'offset':[0,0],
  7. 'points':['bl','tl']
  8. }
  9. }">
  10. <div>弹出层</div>
  11. </div>

这是一个简单的弹窗实例,弹层的参数简介如下:

  1. data-widget-type为使用的挂件类型
  1. data-widget-config为参数设置
  1. 其中trigger为触发对象
  1. align为对齐方式
  1. node为参考对齐目标
  1. offset是微调
  1. points[x,y]表示参考目标的x位置与弹窗层的y位置对齐,xy9个取值方式:【tl,tc,tr,cl,cc,cr,bl,bc,br (tl=top left)
    时间有限,简单做了一下笔记,有时间了再来完善。
  1.  
  1.  

关于淘宝店铺装修弹出层popup的记录的更多相关文章

  1. jquerymobile知识点三:弹出层popup

    弹出层popup很简单,主要就是弹出验证,登陆注册,提交信息之类的,下面是我写好的一个demo... <div data-role="popup" id="popu ...

  2. 使用cookies弹出层每24小时弹出一次

    第一步:下载cookies的库 https://github.com/js-cookie/js-cookie 第二步:设置Cookies的失效时间,这里有两种方法,按天计算和按小时计算 functio ...

  3. Popup - 弹出层

    //图片类快捷弹出层 <a href="" target="_blank"> <div class="panlifang1" ...

  4. vant - 弹框 【Popup 弹出层】【DatetimePicker 时间选择】

    [HelloWorld.vue] <template> <div class="hello"> <van-row class="m-head ...

  5. JQuery weui 中的Popup (弹出层:底部)

    //弹出层(从底部) <div id="bottomb" class="weui-popup__container popup-bottom"> & ...

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

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

  7. Winform 实现像菜单一样弹出层

    原文:Winform 实现像菜单一样弹出层 在实际工作中,如果能像菜单一样弹出自定义内容,会方便很多,比如查询时,比如下拉列表显示多列信息时,比如在填写某个信息需要查看一些信息树时.这个时候自定义弹出 ...

  8. zepto弹出层组件

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

  9. jQuery弹出层始终垂直居中相对于屏幕或当前窗口

    把弹出层的位置设为fixed,设置top:50%,然后获取当前元素的整体的高度height,用获取的高度height/2,设置margin-top:-height/2.即可把当前的弹出层始终垂直居中于 ...

随机推荐

  1. python smtp 群发邮件

    最近工作中遇到使用脚本处理问题并发送结果邮件,使用python的smtp模块很简单的完成了实现.今天遇到一个问题,根据脚本的测试结果需要群发邮件,但是发送邮件的py文件只有首个地址收到了邮件.仔细排查 ...

  2. 夏夏的php开发笔记开写啦

    主要写一些平时drupal.dedecms.帝国cms.wordpress等php程序开发过程中遇到的问题,以及解决的过程,记录夏夏的成长,把握契机,创造未来

  3. dubbo实践

    最近公司准备重构内部服务模块,准备使用dubbo,故研究一下. 官方文档:http://alibaba.github.io/dubbo-doc-static/Home-zh.htm 1. 用maven ...

  4. 百度API城市代码CityCode官方文档

    100 拉萨市101 那曲地区102 日喀则地区103 阿里地区104 昆明市105 楚雄彝族自治州106 玉溪市107 红河哈尼族彝族自治州108 普洱市109 西双版纳傣族自治州110 临沧市11 ...

  5. Apache 配置多站点访问「为项目分配二级域名」

    一级域名(baidu.com)也叫作顶级域名,注册一级域名是需要付费的. 而二级域名(image.baidu.com)是一级域名的延伸,所以只要购买了一级域名,二级域名是可以任意配置的. 其实(www ...

  6. 【sdoi2013】森林 BZOJ 3123

    Input 第一行包含一个正整数testcase,表示当前测试数据的测试点编号.保证1≤testcase≤20. 第二行包含三个整数N,M,T,分别表示节点数.初始边数.操作数.第三行包含N个非负整数 ...

  7. oracle学习笔记(二)

    1. Oracle字符串操作 1.1. 字符串类型 1.1.1. CHAR和VARCHAR2类型 CHAR和VARCHAR2类型都是用来表示字符串数据类型,用来在表中存放字符串信息, 比如姓名.职业. ...

  8. vmware 安装dos注意

    vmware创建ms-dos虚拟机,安状DOS71.ISO. 新创建的机器,启动次序为Removable Devices/Hard Device/CD-ROM Device 新建的机器,第一次启动时, ...

  9. Mongo基础使用,以及在Express项目中使用Mongoose

    MongoDB的基本使用 MongoDB特点: 使用BSON存储数据 支持相对丰富的查询操作(相对其他nosql数据库) 支持索引 副本集(支持多个实例/多个服务器运行同个数据库) 分片(数据库水平扩 ...

  10. 实现放大转场动画 from cocoachina

    原文1:http://www.cocoachina.com/ios/20160318/15714.html 原文2:http://ningandjiao.iteye.com/blog/2049105 ...