小龙最近做了一下下淘宝的店铺装修,里面封装的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. NetBean 8 创建EJB

    一. 介绍 百度了一下关于在NetBean开发环境里创建EJB的教程,没有找到好的例子,2天的调试过程,写下来帮助后人. EJB (Enterprise Java Bean) 是一套高扩展性的开发企业 ...

  2. 深入理解jsonp跨域请求原理

    在进行网站开发的过程中经常会用到第三方的数据,但是由于同源策略的限制导致ajax不能发送请求,因此也无法获得数据.解决ajax的跨域问题有两种方法: 一.jsop 二.XMLHttpRequest2中 ...

  3. CSS布局 ——从display,position, float属性谈起

    页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...

  4. JSON Accelerator真是个好东西...

    支持OBJC,JAVA,Python,OBJC(Core Data),Python(Django) 并实现了NSCoding和NSCoping,方便归档和复制. 再也不用辛辛苦苦的写Model了.. ...

  5. Activity系列讲解---Activity运行时的屏幕方向,全屏,窗体模式的设置

    Android内置了方向感应器的支持.Android会根据所处的方向自动在竖屏与横屏间切换.但是有的应用程序只能在横/竖屏时运行,比如某些游戏,此时我们要锁定该Activity运行时的屏幕方向,< ...

  6. C语言 回文

    #include <stdio.h> #include <string.h> int main() { ]; int i,j; printf("Please inpu ...

  7. HTML页面如何判断是手机访问还是电脑访问

    可以通过js来判断访问设备,代码如下: <script type="text/javascript"> var system ={}; var p = navigato ...

  8. 将页面转化为pdf的实现方法

    1.实现代码把html转化为pdf主要是使用wkhtmltopdf.exe工具生成,在获取转化的地址,创建一个进程,把地址传递到进程参数中进行调用wkhtmltopdf.exe工具打印 2.代码片段/ ...

  9. xposed XDA记录

    [OFFICIAL] Xposed for Lollipop/Marshmallow [Android 5.0/5.1/6.0, v86, 2016/10/31] http://forum.xda-d ...

  10. iOS常用第三方开源框架和优秀开发者博客等

    博客收藏iOS开发过程好的开源框架.开源项目.Xcode工具插件.Mac软件.文章等,会不断更新维护,希望对你们有帮助.如果有推荐或者建议,请到此处提交推荐或者联系我. 该文档已提交GitHub,点击 ...