Layui第八天学习

Layui第八天学习Layui 第八天学习

欢迎大家来到IT世界,在知识的湖畔探索吧!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>弹出层</title>

        <!--独立组件使用-->
        <!--
        <link rel="stylesheet" type="text/css" href="layui/layer/layer.css">
        <script src="layui/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="layui/layer/layer.js" text="text/javascript" charset="utf-8"></script>
        -->

        <!--layui模块化使用-->
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
        <script src="layui/layui.js" text="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <!--
            layui模块化使用
               只需要引入layui的css与js文件,在script中使用layui.use()加载模块
        -->

        <span>新闻</span>
        <span>体育</span>
        <span id="kj">科技</span>

        <script type="text/javascript">
            //加载模块
            layui.use("layer",function(){
                var layer = layui.layer;
                //layer.msg("你好,Layer");

                //信息框
                /*
                layer.open({
                    type : 0,
                    //title:系统消息,false:不显示标题
                    title:false,
                    title:['标题','color:blue'],
                    //content可以传入任意的文本或html
                    content: "你好,Layer"
                });
                */

                //页面层
                /*
                layer.open({
                    type:1,
                    title:"系统消息",
                    content:"<div style='height:200px;width:400px'>你好,Layer</div>"
                });
                */

                //iframe
                /*
                layer.open({
                    type:2 ,
                    title:"系统消息",
                    //content可以是一个url,如果你不想让iframe出现滚动条,你还可以content:['url','no']
                    content:"http://www.163.com"
                    //content:["http:///www.163.com",'no'],
                    //area:'300px':设置宽度,高度自适应,area:['800px','400px']:设置宽高
                });
                */

                //tip层
                /*
                layer.open({
                    type:4,
                    content:['科技','#kj']
                });
                */

                //layer.alert('哈哈',{icon:1});
                //layer.alert('处理失败',{icon:2});
                //layer.alert("处理成功",{icon:6});

                //layer.msg('不开心',{icon:5});

                /*
                layer.msg('确定删除该记录吗?',{
                    time:0, //不自动关闭
                    btn:['删除','取消删除'],  //按钮
                    yes:function(index){
                        layer.close(index); //关闭当前弹出框
                        layer.msg('记录已成功删除',{
                            icon:6,
                            btn:['处理成功']
                        });
                    }
                    
                });
                */

                layer.msg('玩命加载中......',function(){
                    //关闭后操作
                    layer.msg('(⊙o⊙)?');
                });

                //layer.load(2);

            });
        </script>
    </body>
</html>

欢迎大家来到IT世界,在知识的湖畔探索吧!

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/95341.html

(0)
上一篇 2024年 12月 7日 下午8:23
下一篇 2024年 12月 7日 下午8:55

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信