最新Layer弹出层实例【开箱即用】

Bertha 。 2022-04-16 01:48 440阅读 0赞

## 最新Layer弹出层实例 ##

代码如下，会有意外收获

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
        <script src="./layer/layer.js"></script>
        <script>
    //鼠标点击出现爱心特效
    		(function(window,document,undefined){
    			var hearts = [];
    			window.requestAnimationFrame = (function(){
    				return window.requestAnimationFrame ||
    				window.webkitRequestAnimationFrame ||
    				window.mozRequestAnimationFrame ||
    				window.oRequestAnimationFrame ||
    				window.msRequestAnimationFrame ||
    				function (callback){
    					setTimeout(callback,1000/60);
    				}
    			})();
    			init();
    			function init(){
    				css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
    				attachEvent();
    				gameloop();
    			}
    			function gameloop(){
    				for(var i=0;i<hearts.length;i++){
    					if(hearts[i].alpha <=0){
    						document.body.removeChild(hearts[i].el);
    						hearts.splice(i,1);
    						continue;
    					}
    					hearts[i].y--;
    					hearts[i].scale += 0.004;
    					hearts[i].alpha -= 0.013;
    					hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
    				}
    				requestAnimationFrame(gameloop);
    			}
    			function attachEvent(){
    				var old = typeof window.onclick==="function" && window.onclick;
    				window.onclick = function(event){
    					old && old();
    					createHeart(event);
    				}
    			}
    			function createHeart(event){
    				var d = document.createElement("div");
    				d.className = "heart";
    				hearts.push({
    					el : d,
    					x : event.clientX - 5,
    					y : event.clientY - 5,
    					scale : 1,
    					alpha : 1,
    					color : randomColor()
    				});
    				document.body.appendChild(d);
    			}
    			function css(css){
    				var style = document.createElement("style");
    				style.type="text/css";
    				try{
    					style.appendChild(document.createTextNode(css));
    				}catch(ex){
    					style.styleSheet.cssText = css;
    				}
    				document.getElementsByTagName('head')[0].appendChild(style);
    			}
    			function randomColor(){
    				return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
    			}
    		})(window,document);
            $(function(){
                /**
                 * layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。
                 * 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
                 */
    
                $("#a1").click(function() {
    //                alert('绑定上事件了');
                    layer.msg("layer引入进来了", {time:1000 });
    //                layer.confirm("这里是提示的内容", function () {
    //                    alert("点击确定进入的事件");
    //                }, function () {
    //                    alert("点击取消后进入的时间");
    //                });
    //                alert("layer是异步的执行，不等你点确认或者取消，这里都会执行到，所以后面要执行的代码都要放到layer里面的回调函数中");
                });
                $("#a2").click(function() {
                    layer.open({
                        type:0,
                        title:['自定义标题', 'font-size:18px;'],
                        content:'提示的内容'
                    });
    
                });
    
                // 样式不会搞
                $("#a3").click(function() {
                    layer.open({
                        skin: 'demo-class',
                        content: 'haha'
                    })
                });
    
                // 图标
                $("#a4").click(function() {
    //                layer.alert('酷毙了', {icon: 1});
                    layer.msg('酷毙了', {icon: 1});
    //                layer.alert('不开心', {icon: 5});
                    layer.msg('不开心', {icon: 5, time: 3000});
    
                });
                // 按钮1
                $("#btn1").click(function() {
                    layer.confirm('这是第一个按钮',function() {
    
                        console.log('确认后回调');
                    },function() {
                        console.log('取消后回调');
                    });
                });
                // 按钮2
                $("#btn2").click(function() {
                    layer.confirm('纳尼？', {
                        btn: ['按钮一', '按钮二', '按钮三','按钮四'] //可以无限个按钮
                        ,btn4: function(index, layero){
                            //按钮【按钮三】的回调
                            console.log('按钮三的回调');
                        },btn3: function() {
                            console.log('按钮三的回调');
                        },btn2: function() {
                            console.log('按钮二的回调');
                        },btn1: function() {
                            console.log('按钮一的回调');
                        }
                    });
                });
                // 按钮3
                $("#btn3").click(function() {
                    layer.open({
                        content: 'test'
                        ,btn: ['按钮一', '按钮二', '按钮三']
                        ,yes: function(index, layero){
                            //按钮【按钮一】的回调
                            console.log('按钮【按钮一】的回调');
                            console.log(index);
                            console.log(layero);
    //                        layer.close(index);
                        },btn2: function(index, layero){
                            //按钮【按钮二】的回调
                            console.log('按钮【按钮二】的回调');
                        },btn3: function(index, layero){
                            //按钮【按钮三】的回调
                            console.log('按钮【按钮三】的回调');
                        },cancel: function(){
                            //右上角关闭回调
                            console.log('右上角关闭回调');
                        }
                    });
                });
    
                // layer.alert 普通信息框
                $("#alert1").click(function() {
                    layer.alert('简单的提示');
                });
                $("#alert2").click(function() {
                    layer.alert('加一个表情', {icon: 1});
                });
                $("#alert3").click(function() {
                    layer.alert('有回调了 控制台有输出', {icon: 1}, function(index) {
                        window.console.log('alert的回调函数');
                        layer.close(index); // 关闭提示框
                    });
                });
    
                // layer.confirm 询问框
                $("#confirm1").click(function() {
                    layer.confirm('is not? 确认控制台输出', function(index){
                        //do something
                        console.log('确认的回调');
                        layer.close(index);
                    });
                });
                $("#confirm2").click(function() {
                    layer.confirm('is not? 确认控制台输出', {icon: 3}, function(index){
                        //do something
                        console.log('确认的回调');
                        layer.close(index);
                    });
                });
                $("#confirm3").click(function() {
                    layer.confirm('is not? 确认控制台输出', {icon: 3, title:'仓老师提示：'}, function(index){
                        //do something
                        console.log('确认的回调');
                        layer.close(index);
                    });
                });
    
                // layer.msg
                $("#msg1").click(function() {
                    layer.msg('弱弱的提示');
                });
                $("#msg2").click(function() {
                    layer.msg("有表情的提示", {icon: 6});
                });
                $("#msg3").click(function() {
                    layer.msg("提示会显示3秒", {icon: 6, time: 2000 });
                });
                $("#msg4").click(function() {
                    layer.msg("提示结束后 执行方法 控制台", {icon: 6, time: 2000 }, function() {
                        console.log("提示结束，我就执行");
                    });
                });
    
                // layer.load
                $("#load1").click(function() {
                    var index = layer.load();
    //                layer.close(index);
                });
                $("#load2").click(function() {
                    var index = layer.load(1);
    //                layer.close(index);
                });
                $("#load3").click(function() {
                    console.log("最长等待3秒");
                    var index = layer.load(2, {time: 3000});
    //                layer.close(index);
                });
                $("#load4").click(function() {
                    console.log("控制关闭");
                    var index = layer.load();
                    layer.close(index);
                });
    
                // tips 提示的位置比msg更精准
                $("#tips1").click(function() {
                    layer.tips('只想精准的提示', this);  // "tips4"
                });
                $("#tips2").click(function() {
                    layer.tips('只想精准的提示', "#tips3");  //可以提示到别人头上去
                });
                $("#tips3").click(function() {
                    layer.tips('在上面', "#msg4", {
                        tips:1  // 提示出现的位置   1 2 3 4 上 右 下 左   当下面没有位置时显示在上面
                    });
                });
    
    
    
            });
        </script>
    </head>
    <body>
    <a id="a1" href="javascript:;">引入layer</a><br/>
    <a id="a2" href="javascript:;">层1</a><br/>
    <a id="a3" href="javascript:;">样式</a><br/>
    <a id="a4" href="javascript:;">图标</a><br/>
    <a id="btn1" href="javascript:;">按钮1</a><a id="btn2" href="javascript:;">按钮2</a><a id="btn3" href="javascript:;">按钮3</a><br/>
    <h5>layer.alert 普通信息框</h5>
    <button id="alert1">按钮一</button>
    <button id="alert2">按钮二</button>
    <button id="alert3">按钮二</button>
    <h5>layer.confirm 询问框</h5>
    <button id="confirm1">按钮一</button>
    <button id="confirm2">按钮二</button>
    <button id="confirm3">按钮二</button>
    <h5>layer.msg(content, options, end) - 提示框</h5>
    <button id="msg1">按钮一</button>
    <button id="msg2">按钮二</button>
    <button id="msg3">按钮三</button>
    <button id="msg4">按钮四</button>
    
    <h5>layer.load(icon, options) - 加载层</h5>
    <button id="load1">按钮一</button>
    <button id="load2">按钮二</button>
    <button id="load3">按钮三</button>
    <button id="load4">按钮四</button>
    <h5>layer.tips(content, follow, options) - tips层</h5>
    <button id="tips1">按钮一</button>
    <button id="tips2">按钮二</button>
    <button id="tips3">按钮三</button>
    </body>
    </html>