javascript-弹窗组件

最新推荐文章于 2024-03-17 16:35:36 发布

weixin_33872566

最新推荐文章于 2024-03-17 16:35:36 发布

阅读量137

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/oygg/p/5681966.html

本文介绍了一款基于RequireJS的简易弹窗插件开发过程，包括样式与功能实现细节，如toast提示、alert警告及confirm确认对话框等。

在平时开发的过程中，总会用到一些交互类型的提示，以前一直用的别人开发好的，比如 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     width: 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     width: 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      });