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

<div class="area001">触发区域</div>
<div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
'trigger':'.area001',
'align':{
'node':'.area001',
'offset':[0,0],
'points':['bl','tl']
}
}">
<div>弹出层</div>
</div>

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

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

												

关于淘宝店铺装修弹出层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. TCPIP、Http、Socket的协议~ 写得挺形象,赞

    这篇文章写得挺形象,对TCPIP.HTTP.Socket的作用有一个整体层次的理解. 转载文章内容如下: 网络由下往上分为物理层.数据链路层.网络层.传输层.会话层.表示层和应用层.   通过初步的了 ...

  2. WCF学习第二篇:WCF 配置架构。这有助于对wcf配置的理解和记忆

    使用 Windows Communication Foundation (WCF) 配置元素,您可以配置 WCF 服务和客户端应用程序. 可以使用配置编辑器工具 (SvcConfigEditor.ex ...

  3. oracle临时表空间操作

    1.查看临时表空间 (dba_temp_files视图)(v_$tempfile视图)select tablespace_name,file_name,bytes/1024/1024 file_siz ...

  4. 如何更改gnome-screenshot的默认的保存路径?

    参考这篇文章: http://www.itye.org/archives/3121 首先, 在dconf-editor中设置, screenshot的自动保存路径: auto-save-directo ...

  5. js 也来 - 【拉勾专场】抛弃简历!让代码说话!

    前些日子谢亮兄弟丢了一个链接在群里,我当时看了下,觉得这种装逼题目没什么意思,因为每种语言都有不同的实现方法,你怎么能说你的方法一定比其他语言的好,所以要好的思路 + 好的语言特性运用才能让代码升华. ...

  6. javascript数组array

    注意:1.array的length不是只读的.可以从数组的末尾移出项或者向数组中添加新项.看下面例子: var colors = ["red","yellow" ...

  7. [从产品角度学excel 04]-单元格的“衣服”

    忘记发这里了..补发一下 这是<从产品角度学EXCEL>系列——单元格篇. 前言请看: 0 为什么要关注EXCEL的本质 1 excel是怎样运作的 2 EXCEL里的树形结构 3 单元格 ...

  8. 答辩HTML5

    答辩有三个项目,有三个游戏和知乎,游戏都是有js写的,我想说的是想要做一个是那么难啊!老师给了我们游戏的项目还有游戏的思路构成,完成项目.还有一个知乎,也很难,用到HTML,css3,php,数据库, ...

  9. jsonp 实例

    一直以为很复杂吧?其实很简单,简单到你不敢相信 1.前端引好jquery文件 2.前端代码: $.ajax({       url: 'http://www.xxxxxxxx.com/expand.a ...

  10. [每日一记] Python报错 综述

    提纲 -- Syntax errors -- Static semantic errors -- Full semantic errors -- 使用一门语言,不论是自然语言还是编程语言,我们需要注意 ...