[文章目录]显示/隐藏

Layer是一款近年来备受青睐的web弹层组件,
它具备全方位的解决方案,
致力于服务各水平段的开发人员,
您的页面会轻松地拥有丰富友好的操作体验,
只依赖于jQuery提供了多种的弹出层选择,
对iframe支持友好,
可去其官网体验一下具体的例子
传送门
我为什么要介绍这个呢?
因为在我侧栏视频中引用了这个弹出层效果,
感觉还不错,所有介绍给大家吧!
本来使用JQuery UI的但跟我主题冲突,
懒的去精简了,所以用了这个Layer.

使用

使用 Layer，只需要引入 jquery.js 和 layer.js 即可,相关依赖的 CSS,图片都会自动加载,好方便的

例子

 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Bom 测试</title>  
  6. <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js" charset="utf-8"></script>  
  7. <script src="http://cdn.staticfile.org/layer/2.3/layer.js" charset="utf-8"></script>  
  8. <style media="screen">  
  9. body {  
  10. font-family: "微软雅黑", Helvetica, Arial, sans-serif;  
  11. }  
  12. </style>  
  13. </head>  
  14. <body>  
  15. <button id="test1">小小提示层</button>  
  16. <div id="box" style="display: none">  
  17. <p>弹出对话框中的自定义内容</p>  
  18. <button id="tip">弹出 Tip</button>  
  19. </div>  
  20. <script>  
  21. $(document).ready(function() {  
  22. $('#test1').on('click', function() {  
  23. layer.open({  
  24. type: 1,  
  25. title: '弹出层',  
  26. content: $('#box'),  
  27. area: ['600px', '300px'],  
  28. shadeClose: false,  
  29. btn: ['确定', '取消'],  
  30. yes: function() {  
  31. layer.msg('啥也不干');  
  32. },  
  33. btn2: function() {  
  34. layer.msg('玩命提示中');  
  35. return false;  
  36. }  
  37. });  
  38. });  
  39. $('#tip').click(function(event) {  
  40. layer.tips('Hi', '#test1');  
  41. });  
  42. });  
  43. </script>  
  44. </body>  
  45. </html>