小龙最近做了一下下淘宝的店铺装修,里面封装的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. 如何保存gnome的linux的 会话?相当于windows下的休眠?

    在关机前, 你进行的所有操作, 的集合, 就叫做你跟 linux系统 机器间的 一次 会话, 一个session. linux 可以 在关机时保存 这些session, 保存这些打开的窗口 和程序. ...

  2. python3.5.2本地环境搭建

    OS:win7 Download URL:https://www.python.org/downloads/release/python-352/ install 下载二进制安装文件之后,点击安装,一 ...

  3. HashTable初次体验

    用惯了数组.ArryList,初次接触到HashTable.Dictionary这种字典储存对于我来说简直就是高大上. 1.到底什么是HashTable HashTable就是哈希表,和数组一样,是一 ...

  4. Android 项目结构图

    src:存放Java源代码 gen:存放系统自动生成的配置文件 Android 4.4.2:包含Android.jar文件,包含构建应用程序所需的所有Android SDK库 asssets:存放资源 ...

  5. Python 学习小结

    python 学习小结 python 简明教程 1.python 文件 #!/etc/bin/python #coding=utf-8 2.main()函数 if __name__ == '__mai ...

  6. C和指针 第十六章 标准函数库

    字符串转换: long int strtol(char const *string, char **unused, int base); 将字符串转换为数值形式,遇到非法字符停止,如果stop不是NU ...

  7. ssh

    ssh的配置文件有两个:服务端:/etc/ssh/sshd_config 客户端:/etc/ssh_config 服务端配置文件:/etc/ssh/sshd_config [root@localhos ...

  8. HTML5 中的 canvas 画布(一)

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

  9. python note

    =和C一样,为赋值.==为判断,等于.但是,在python中是不支持行内赋值的,所以,这样避免了在判断的时候少写一个出错. dictionary 的key唯一,值可以为很多类型. list的exten ...

  10. BZOJ 2086: [Poi2010]Blocks

    Description 每次可以将大于 \(k\) 的一个数 \(-1\), 在左边或右边的数 \(+1\) ,问最大能得到多长的序列每个数都大于等于 \(k\) . Sol 单调栈. 这道题好神啊q ...