自定义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 += '<div style="font-size:13px;">';
        	//背景层
        	html += '<div class="dialog_bg_1" ><div> ';
        	//窗体层
        	html += '<div class="dialog_1" style="width:'+options.width+';height:'+options.height+';">';
        	html += ' <div id="modal-header" style="width:100%;min-height:40px;height:auto;background-color:#00BFFF;color:white;"> ';
        	html += '  <div id="modal-title" style="width:calc(100% - 30px);float:left;text-align:left;height:40px;line-height:40px;text-indent:1em;"> ';
        	html += '  ' + options.title + ' ';
        	html += '  </div> ';//modal-title
        	html += '  <div  onclick="javascript:close_1(\''+selectorId+'\')" style="width:30px;height:40px;line-height:40px;text-align:center;float:left;font-size:15px;cursor:pointer;"><strong>x</strong></div> ';
        	html += ' </div>';//modal-header
        	html += ' <div id="modal-content" style="width:90%;min-height:40px;height:auto;margin:auto;margin-top:20px;margin-bottom:20px;border:0px solid red;"> ';
        	html += '  <div> '+options.msg+' </div>';
        	html += '  <div id="schedule-div" style="display:none;width:100%;margin-top:15px;color:#666;">';
        	html += '     <span class="schedule" style="padding-right:5px;"></span>秒后自动关闭';
        	html += '  </div>'; 
        	html += ' </div> ';//modal-content
        	html += ' <div id="modal-footer" style="width:100%;height:40px;border-top:1px solid #CCC;padding-bottom:10px;"> ';
        	if(options.type=="alert"){
        		html += ' <div class="close" onclick="javascript:close_1(\''+selectorId+'\')" onmouseover="hover_in_1(this)" onmouseout="hover_out_1(this);"  style="cursor:pointer;float:right;margin-right:20px;margin-top:10px;width:80px;height:30px;line-height:30px;background-color:#0CF;color:white;text-align:center;border-radius:5px;"> ';
            	html += ' 关闭';
            	html += ' </div>'; 
        	}
        	html += ' </div>';//modal-footer
        	html += '</div>';//dialog_class_1
        	html += '</div>';
        	
        	$(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;
}

测试页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>自定义弹出层</title>

<!-- jquery -->
<script type="text/javascript" src="dist/js/jquery-3.3.1.min.js"></script> 

<!-- 插件脚本 -->
<script type="text/javascript" src="dist/js/modal.js"></script>
<link rel="stylesheet" type="text/css" href="dist/css/modal.css">

<style>
body{
padding:0;
margin:0;
}

</style>
<script type="text/javascript">
$(function(){ 
	
	 $("#showModal").hover(function(){
		 $(this).css("color","white")
		 $(this).css("background-color","#00BFFF")
	 },function(){
		 $(this).css("color","#00BFFF")
		 $(this).css("background-color","")
	 })
	 
	$("#showModal").on("click",function(){ 
		dialog.open();
	})
})
</script>

</head>
<body>
<input id="basePath" value="<%=request.getContextPath()%>" type="hidden"/> 
<div id="dialog"></div> 

<div id="showModal" style="display:inline-block;font-size:13px;cursor:pointer;;margin-top:20px;margin-left:20px;;padding:5px;text-align:center;color:#00BFFF;border:1px solid #00BFFF;border-radius:5px;">
<span style="padding-right:3px;">+</span>弹出窗口
</div>

<script type="text/javascript">
	var dialog = $('#dialog').dialog({ 
		/* width:"800px",  */
		title:"删除结果",
		msg:"删除成功！",
		timeout:5,   
	});
	//dialog.open();
	//dialog.close();
</script>	
 
 



</body>
</html>

 

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

<div id="dialog"></div> 
<script type="text/javascript">
	var dialog = $('#dialog').dialog({ 
		/* width:"800px",  */
		title:"删除结果",
		msg:"删除成功！",
		timeout:5,   
	});
	//dialog.open();
	//dialog.close();
</script>

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

<div id="dialog"></div> 
<script type="text/javascript">
	var options = {
		/* width:"800px",  */
		title:"删除结果",
		msg:"删除成功！",
		timeout:5, 
	}
	var dialog = $('#dialog').dialog(options);
	//dialog.open();
	//dialog.close();
</script>	

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

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

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

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

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