layui中使用的一些弹出框

发布: 2020-06-08 17:30:03
转载
5157人浏览过

layui中使用的一些弹出框

第一步:引用文件

1.jpg

第二步:写脚本

<script>
//iframe窗
//layer.open({
// type: 2,
// title: false,
// closeBtn: 0, //不显示关闭按钮
// shade: [0],
// area: ['340px', '215px'],
// offset: 'rb', //右下角弹出
// time: 2000, //2秒后自动关闭
// anim: 2,
// content: ['text1.html', 'no'], //iframe的url,no代表不显示滚动条 右下角页面
// end: function () { //此处用于演示
// layer.open({
// type: 2,
// title: '很多时候,我们想最大化看,比如像这个页面。',
// shadeClose: true,
// shade: false,
// maxmin: true, //开启最大化最小化按钮
// area: ['893px', '600px'],
// content: 'text.html' //最大化页面
// });
// }
//});

//初体验
//layer.alert('内容')
//第三方扩展皮肤
//layer.alert('内容', {
// icon: 1,
// skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则,去这里查阅
//})

//询问框
//layer.confirm('您是如何看待前端开发?', {
// btn: ['重要', '奇葩'] //按钮
//}, function () {
// layer.msg('的确很重要', { icon: 1 });
//}, function () {
// layer.msg('的确是奇葩', { icon: 1 });
//});

//提示层
//layer.msg('玩命卖萌中', function () {
// //关闭后的操作
//});
layer.msg('更新成功',{time:1000}, function () {
parent.location.reload();    //刷新父页面   第二个参数设置msg显示的时间长短
});

//墨绿深蓝风
//layer.alert('墨绿风格,点击确认看深蓝', {
// skin: 'layui-layer-molv' //样式类名
// , closeBtn: 1
//}, function () {
// layer.alert('偶吧深蓝style', {
// skin: 'layui-layer-lan'
// , closeBtn: 1
// , anim: 4 //动画类型
// });
//});

//页面层
//layer.open({
// type: 1,
// skin: 'layui-layer-rim', //加上边框
// area: ['auto', 'auto'], //宽高
// content: '<div id="dd" style="border:1px solid red;width:100px; height:100px;background-color:pink;">今天要下雪了</div>'
//});

//自定页
//layer.open({
// type: 1,
// skin: 'layui-layer-demo', //样式类名
// closeBtn: 1, //0不显示关闭按钮
// anim: 2,
// shadeClose: true, //开启遮罩关闭
// content: '<div id="dd" style="border:1px solid red;width:100px; height:100px;background-color:pink;">今天要下雪了</div>'      也可以跳转到某个页面 content: "@Url.Action("Detial", "UserInfo")?id="+id
//});

//tips层
//layer.tips('Hi我是tips', '#btn'); //第二个参数是吸附元素选择器,如#id

//iframe层
//layer.open({
// type: 2,
// title: 'layer mobile页',
// shadeClose: true,
// shade: 0.8,
// area: ['70%', '90%'],//宽 高
// content: 'text.html'
//});

////加载层-默认风格
//layer.load();
////此处演示关闭
//setTimeout(function () {
// layer.closeAll('loading');
// layer.msg("关闭了");
//}, 2000);

//小tips
//layer.tips('我是另外一个tips,只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
// tips: [1, '#3595CC'],
// time: 4000
//});

//prompt层
//layer.prompt({ title: '输入任何口令,并确认', formType: 1 }, function (pass, index) {
// layer.close(index);
// layer.prompt({ title: '随便写点啥,并确认', formType: 2 }, function (text, index) {
// layer.close(index);
// layer.msg('演示完毕!您的口令:' + pass + '<br>您最后写下了:' + text);
// });
//});

//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文档手册页
// , anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机
// });
//});
</script>
登录后复制

更多layui知识请关注PHP中文网layui教程栏目

以上就是layui中使用的一些弹出框的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
相关标签:
来源:博客园网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号