第一步:引用文件

第二步:写脚本

<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 各种弹出框的更多相关文章

  1. layui关闭弹出框

    layer.close(index) - 关闭特定层 //当你想关闭当前页的某个层时 var index = layer.open(); var index = layer.alert(); var ...

  2. css超简单实现div页面居中【适合做弹出框】

    1.前言 现在项目中用到弹出框的话大部分都是直接用控件的.不过有控件虽方便,但有时候会有冲突的地方.我上次用layui的弹出框控件,然后也用到了百度的编辑器uEditor,然后一切都好好的,结果编辑赋 ...

  3. Layui 好用的弹出框

    layui的下载地址: http://www.layui.com/ 需要引用layui里面的css跟js layui自带jquery var $ = layui.$ 一个直接弹出另一个窗体的弹出框 w ...

  4. layui弹出框打开第二次select内容无法显示问题

    今天, 在使用layui弹出框的时候, 第一次进入select内容加载是正常的, 将弹出框关闭再次进入后select下拉框内容为空, 经排查是因为每次弹出窗口z-index都会改变, 弹出框的z-in ...

  5. 关于Layer弹出框初探

    layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,laye ...

  6. 弹出框layer的使用封装

    layer弹出框官方网址:http://layer.layui.com/ layer常用方法的封装:layerTool.jsp layer.config({ extend: 'extend/layer ...

  7. 弹出框插件layer使用

    layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...

  8. HTML页面使用layer弹出框输入数据

    javascript中layer是一款近年来备受青睐的web弹层组件,layer.open对弹出框进行输入信息,并处理返回结果.详细介绍http://layer.layui.com/ 部署:将laye ...

  9. layui关闭弹出层

    layui关闭弹出层,今天我在vscode中使用p parent.layer.closeAll()发现没效果 换成layer.closeAll()就解决了这个问题. 由此我觉得关闭layui关闭弹出层 ...

随机推荐

  1. 指定so动态链接库连接器

    在学习x86_64汇编时, 发现一旦使用glibc库函数, 如printf时, 一般是需要使用为ld传递命令行参数-lc来动态连接libc.so的, 但是, 生成的可执行文件却无法运行: 气煞我也! ...

  2. 比较好用的Copy代码到博客VS扩展工具

    这个工具叫做TrimCopy,可以避免拷贝出来的代码带空格,影响布局.

  3. C# WinForm 多线程 应用程序退出的方法 结束子线程

    1.this.Close(); 只是关闭当前窗口,若不是主窗体的话,是无法退出程序的,另外若有托管线程(非主线程),也无法干净地退出: 2.Application.Exit(); 强制所有消息中止,退 ...

  4. CorelDrawX8安装时提示已安装另一个版本

    (1)首先卸载VIsualC++ 2015 运行库. (2)如果有VisualC++ 2017运行库,卸载VisualC++2017运行库,即可.

  5. 【python小练】0017-将xls文件内容写入xml文件中

    第 0017 题: 将 第 0014 题中的 student.xls 文件中的内容写到 student.xml 文件中,如 下所示: <?xml version="1.0" ...

  6. Linux查看版本信息

    查看Linux版本以及是32位还是64位 查看版本 一.查看Linux内核版本命令(两种方法): 1.cat /proc/version [root@S-CentOS home]# cat /proc ...

  7. 数据库并发控制及SQL Server的并发控制机制

    在多用户和网络环境下,数据库是一个共享资源,多个用户或应用程序同时对数据库的同一数据对象进行读写操作,这种现象称为对数据库的并发操作.显然并发操作可以充分利用系统资源,提高系统效率.虽然如此,但是如果 ...

  8. LOJ #2058「TJOI / HEOI2016」求和

    不错的推柿子题 LOJ #2058 题意:求$\sum\limits_{i=0}^n\sum\limits_{j=0}^nS(i,j)·2^j·j!$其中$ S(n,m)$是第二类斯特林数 $ Sol ...

  9. Leetcode#709. To Lower Case(转换成小写字母)

    题目描述 实现函数 ToLowerCase(),该函数接收一个字符串参数 str,并将该字符串中的大写字母转换成小写字母,之后返回新的字符串. 示例 1: 输入: "Hello" ...

  10. Web项目笔记(一)JSONP跨域请求及其概念

    https://blog.csdn.net/u014607184/article/details/52027879 https://blog.csdn.net/saytime/article/deta ...