开发教程
使用手册
广告管理
模板设置
数据库管理
插件管理
分销管理
积分管理
小程序直播
第三方账号注册流程
网站模块
商品模块
订单管理模块
供应商模块
数据模块
微商城模块
小程序&APP模块
常见问题
支付对接
API接口
购物车相关接口
开发手册
支付退款接口
视频教程
FB视频教程
首页 > B2C商城 > 开发手册 > 开发教程 > 正文
漂亮的弹窗
tpshop漂亮的弹窗
TPshop 的弹窗插件, 使用了TPshop的 都知道 无论是前台还是后台有很多很漂亮的弹窗效果, 而这种效果不需要你去写, 这是第三方的弹窗插件,你只需要照着手册去引入它, 而且使用非常简单。
以下来看一下弹窗插件效果
-弹窗js 参考文档 http://layer.layui.com/

1 2 3 4 | 引入TPshop 的 https://help.tp-shop.cn/Public/js/layer/目录下的文件//初体验layer.alert(内容) |

1 2 3 4 | layer.msg(也可以这样, { time: 20000, //20s后自动关闭 btn: [明白了, 知道了] }); |

1 2 | //加载层var index = layer.load(0, {shade: false}); //0代表加载的风格,支持0-2 |

1 2 3 4 5 6 7 8 9 | //prompt层layer.prompt({ title: 输入任何口令,并确认, formType: 1 //prompt风格,支持0-2}, function(pass){ layer.prompt({title: 随便写点啥,并确认, formType: 2}, function(text){ layer.msg(演示完毕!您的口令:+ pass + 您最后写下了:+ text); });}); |


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | //tips层layer.tips(Hi,我是tips, 吸附元素选择器,如#id);//tab层layer.tab({ area: [600px, 300px], tab: [{ title: TAB1, content: 内容1 }, { title: TAB2, content: 内容2 }, { title: TAB3, content: 内容3 }]});//相册层$.getJSON(test/photos.json?v=+new Date, function(json){ layer.photos({ photos: json //格式见API文档手册页 });}); 等等, 还有很多 弹窗 效果丰富多彩, 详细查看 插件官方 地址 http://layer.layui.com/ |
