最新Layer彈出層例項【開箱即用】
阿新 • • 發佈：2018-11-16
最新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>