自定义jquery弹出层插件开发

有一天，小编突发奇想要开发一个基于jquery的弹出层插件，于是就一个字，“干”

先上最终效果图：

插件源码（下载）

1.首先，咱们建立好文件夹架构

2.思路分析，触发弹出层时需要做些什么？

A.制作弹出层背景

B.编写弹出层前端代码UI

3.代码展示：modal.js

;(function($, window, document,undefined) {
    //定义MyBuilder的构造函数
    var MyBuilder = function(selector,options) { 
    	this.selector = selector; 
    	this.options = options;
    	this.init();
    }
    //定义MyBuilder的方法
    MyBuilder.prototype = {
    	constructor:MyBuilder,
        init: function() {
        	var selector = this.selector;
        	var options = this.options;
        	var defaults = {
        	     //各种默认参数
        	     width:"450px",
        	     height:"auto",
        	     title:"未命名标题",
        	     msg:"",
        	     timeout:-1,
        	     type:"alert",
        	}
        	//alert(JSON.stringify(options))
        	this.options = $.extend(defaults,options); //传入的参数覆盖默认参数  
        },
        open: function(){ 
        	var selector = this.selector;
        	var options = this.options;
        	var selectorId = $(selector).attr("id"); //selectorId
        	var html = '';
        	html += '
';
        	//背景层
        	html += '
 ';
        	//窗体层
        	html += '
';
        	html += ' 
 ';
        	html += '  
 ';
        	html += '  ' + options.title + ' ';
        	html += '  
 ';//modal-title
        	html += '  
x
 ';
        	html += ' 
';//modal-header
        	html += ' 
 ';
        	html += '  
 '+options.msg+' 
';
        	html += '  
';
        	html += '     秒后自动关闭';
        	html += '  
'; 
        	html += ' 
 ';//modal-content
        	html += ' 
 ';
        	if(options.type=="alert"){
        		html += ' 
 ';
            	html += ' 关闭';
            	html += ' 
'; 
        	}
        	html += ' 
';//modal-footer
        	html += '
';//dialog_class_1
        	html += '
';
        	
        	$(selector).append(html);//拼接窗体 
        	if(options.timeout > 0){ 
        		var schedule = options.timeout;
        		//显示倒计时关闭的div
        		var scheduleDiv = $(selector).find("#schedule-div");
        		$(scheduleDiv).css("display","block");
        		$(scheduleDiv).children(".schedule").text(schedule);//初始化倒计时最大值
        		var interval = setInterval(function(){ 
        			schedule -- ;
        			$(scheduleDiv).children(".schedule").text(schedule);//倒计时变化值
            		if( schedule <=0 ){
            			close_1(selectorId)
            			clearInterval(interval);
            		}
            	}, 1000);
        	}
        	 
        },
        close: function() {
        	//关闭窗体 
        	var selector = this.selector;
        	$(selector).html("");
        }
    }
    //在插件中使用MyBuilder对象
    $.fn.dialog = function(options) { 
        //创建MyBuilder的实体
        return new MyBuilder(this,options);
    }
})(jQuery, window, document); 






function hover_in_1(this_){
	hover_in(this_);
}

function hover_out_1(this_){
	hover_out(this_);
}

function close_1(selectorId){  
	close_(selectorId);
}






/**
 * 
 * 公共函数-鼠标悬浮在“关闭”按钮时触发的事件
 * 
 * */
function hover_in(this_){
	$(this_).css("background-color","#01A9DB");
}


/**
 * 
 * 公共函数-鼠标离开“关闭”按钮时触发的事件
 * 
 * */
function hover_out(this_){
	$(this_).css("background-color","#0CF");
}


/**
 * 
 * 公共函数-点击“关闭”按钮时触发的事件
 * 
 * */
function close_(selectorId){  
	try{  
		$("#"+selectorId).html("");
	}catch(e){
		
	} 
}

modal.css

.dialog_bg_1 {
	display: block;
	width:100%;
	height:100%;
	position:absolute;
	left:0px;top:0px;
	background-color:black;
	opacity:0.8;
	z-index:1000;
}
.dialog_1 { 
	display: block;
	background-color:white;
	margin:auto;
	margin-top:10%;
	position: relative;
	z-index:1001;
}

测试页面：

 










 
 


+弹出窗口


	
 
 

 

接下来解说一下代码，首先从调用开始

调用的时候，用户应该可以自定义配置参数吧？如上代码dialog函数传入一个json参数给函数处理，如果以上代码不好理解，可以将以上代码理解成这样：

既然调用了dialog函数，接下来我们就处理这个函数，如下：

返回了一个MyBuilder实利。并将当前选择器selector（this）和参数（options）传给这个实利。接下来看看该示例如何处理

可以看到，前端调用dialog时仅仅是初始化了各种参数。于是还要写一个函数，用户触发弹出层的函数open()

好了，基本上已经讲解完了，就几个步骤，是不是超简单？

对你有用的话，别忘了点赞哦。（q:2225629171）