在平时开发的过程中，总会用到一些交互类型的提示，以前一直用的别人开发好的，比如 layer，一个功能非常强大的弹窗组件。在最近的基于require的项目中，总感觉用layer插件和AMD模块化相背离，所以自己就写了一个功能简单的弹窗提示插件，当然功能没有layer强大，只能所满足项目需求，废话不多说，直接P代码
style.css
1 .pop-layer{ 2 position:fixed; 3 height: auto; 4 overflow: hidden; 5 left:0; 6 right: 0; 7 top:0; 8 bottom: 0; 9 z-index: 999; 10 display: none; 11 } 12 .pop-layer .toast{ 13 background:rgba(0, 0, 0, 0.75); 14 60%; 15 margin:40% auto 0; 16 padding: 8px 15px; 17 border-radius: 4px; 18 text-align: center; 19 color: #fff; 20 } 21 .pop-layer .alert{ 22 position: absolute; 23 left: 50%; 24 margin-left:-30%; 25 margin-top: 50%; 26 background:#fff; 27 60%; 28 border-radius: 2px; 29 } 30 .pop-layer .alert-content{ 31 height: auto; 32 overflow: hidden; 33 text-align: center; 34 padding: 20px 10px; 35 } 36 .pop-layer .alert-footer{ 37 display: -webkit-flex; 38 display: flex; 39 -webkit-align-items: center; 40 align-items: center; 41 /* for uc */ 42 display: -webkit-box; 43 -webkit-box-align: center; 44 } 45 .pop-layer .alert-footer div{ 46 -webkit-flex: 1; 47 flex: 1; 48 /* for uc */ 49 -webkit-box-flex: 1; 50 -moz-box-flex: 1; 51 -ms-flex: 1; 52 text-align:center; 53 padding: 10px 0; 54 border-top:1px solid #f0f0f0; 55 } 56 .pop-layer .alert-footer div.cancel-btn{ 57 border-left:1px solid #f0f0f0; 58 }
popLayer.js 。用于项目是基于require开发的，所以该组件只是AMD的一个模块，依赖于jquery；
1 define(["jquery"],function($){ 2 function PopLayer(){ 3 this.layer = $("<div class='pop-layer'></div>"); 4 }; 5 6 PopLayer.prototype.toast = function(config){ 7 this.layer.html("<div class='toast'>"+config.text+"</div>"); 8 $("body").append(this.layer); 9 this.layer.fadeIn(); 10 this.clear(config.time); 11 }; 12 13 PopLayer.prototype.alert = function(config){ 14 config.model?this.layer.attr("style","background:rgba(0, 0, 0, 0.75)"):""; 15 this.layer.html("<div class='alert'><div class='alert-content'>"+config.text+"</div><div class='alert-footer'><div class='sure-btn'>确定</div></div></div>"); 16 $("body").append(this.layer); 17 this.layer.fadeIn(100); 18 $(".sure-btn").bind("click",config.yes); 19 }; 20 21 PopLayer.prototype.confirm = function(config){ 22 config.model?this.layer.attr("style","background:rgba(0, 0, 0, 0.75)"):""; 23 this.layer.html("<div class='alert'><div class='alert-content'>"+config.text+"</div><div class='alert-footer'><div class='sure-btn'>确定</div><div class='cancel-btn'>取消</div></div></div>"); 24 $("body").append(this.layer); 25 this.layer.fadeIn(100); 26 $(".sure-btn").bind("click",config.yes); 27 $(".cancel-btn").bind("click",config.no); 28 }; 29 30 PopLayer.prototype.clear = function(time){ 31 var time = time || 3000; 32 setTimeout(function(){ 33 $(".pop-layer").fadeOut().remove(); 34 },time); 35 }; 36 37 PopLayer.prototype.destroy = function(){ 38 $(".pop-layer").fadeOut().remove() 39 }; 40 41 var popLayer = new PopLayer(); 42 return popLayer; 43 });
模块的使用：
1 使用方法 2 3 popLayer.toast({ 4 text:"loading", 5 time:3000 6 }); 7 8 9 popLayer.alert({ 10 text:"loading", 11 model:true, 12 yes:function(){ 13 console.log(123); 14 } 15 }); 16 popLayer.confirm({ 17 text:"loading", 18 model:true, 19 yes:function(){ 20 console.log(123); 21 }, 22 no:function(){ 23 popLayer.destroy(); 24 } 25 });
功能及其的简单，后期会扩展
能力有限，大神勿喷