`

jquery弹框插件（自定义easy-box）

 
阅读更多

1、插件代码easy-box.js

    

$.extend({
	alert:function(title,msg,width){
		var box_html = getPopBoxHtml('alert',title,msg,'');
		showBoxDiv(box_html,width);
	},
	confirm:function(title,msg,callback,width){
		var box_html = getPopBoxHtml('confirm',title,msg,callback);
		showBoxDiv(box_html,width);
		
		$('#box_ok_btn').click(function(){
			if ($.isFunction(callback)) {
				hideDiv('pop-div');
					callback(true);
				}
		});
	},
	prompt:function(title,label,callback,width){
			var box_html = getPopBoxHtml('prompt',title,label,callback);
			showBoxDiv(box_html,width);
			$('#box_ok_btn').click(function(){
				if ($.isFunction(callback)) {
					var data = $('#easy_box_input').val();
					hideDiv('pop-div');
						callback(data);
					}
			});
	},
	easyBox:function(title,content,width){
			var box_html = getPopBoxHtml('box',title,content,'');
			showBoxDiv(box_html,width);
	}
});

function showBoxDiv(box_html,width){
			$('body').append(box_html);
			var div_obj = $("#pop-div");
			$("#pop-div").css('width',parseInt(width));
			
			var popupHeight = div_obj.height();     
			var popupWidth = div_obj.width();  
			var popupWidth = div_obj.width();
			var windowWidth = window.innerWidth;       
			var windowHeight = window.innerHeight;
			 
		    //添加并显示遮罩层   
		    $("<div id='mask'></div>").addClass("mask").width(windowWidth + document.body.scrollWidth).height(windowHeight + document.body.scrollHeight).appendTo("body").fadeIn(200);
			//动画
	        div_obj.css({"position": "absolute"}).animate({left: windowWidth/2-popupWidth/2,top: windowHeight/2-popupHeight/2, opacity: "show" }, "slow");
			//普通显示				 
//		    div_obj.css({"position": "absolute",'top':windowHeight/2-popupHeight/2,'left':windowWidth/2-popupWidth/2,'display':'block'});
}	
function getPopBoxHtml(type,titile,msg,callback){
	var html = '<div id="pop-div" class="pop-box">';
		html += '<div class="pop-box-title">';
		html += titile+' <a href="javascript:hideDiv(\'pop-div\');" class="pop-box-close">x</a>';
		html += '</div>';
		html += '<div class="pop-box-body" >';
	
	if(type=='alert'){
		html += '<p>'+msg+'</p>';
		html += '</div>';
		html += '<div class="pop-box-bottom">';
		html += '<input id=btnClose type=button onclick="hideDiv(\'pop-div\');" value="确定"/>';
		html += '</div>';
	}else if(type=='confirm'){
		html += '<p>'+msg+'</p>';
		html += '</div>';
		html += '<div class="pop-box-bottom">';
		html += '<input id=btnClose type=button onclick="hideDiv(\'pop-div\');" value="取消"/><input id="box_ok_btn" type=button value="确定"/>';
		html += '</div>';
	}else if(type=='prompt'){
		html += '<p>'+msg+'<input id="easy_box_input" type="text"></p>';
		html += '</div>';
		html += '<div class="pop-box-bottom">';
		html += '<input id=btnClose type=button onclick="hideDiv(\'pop-div\');" value="取消"/><input id="box_ok_btn" type=button value="确定"/>';
		html += '</div>';
	}else{
		html += msg;
		html += '</div>';
	}
	
	html += '</div>';
	return html;
}
//窗口变化时间
$(window).resize(function() {
	  	var div_obj = $("#pop-div");  
	    var windowWidth = window.innerWidth;       
	    var windowHeight = window.innerHeight;  
	    var popupHeight = div_obj.height();     
	    var popupWidth = div_obj.width();
		div_obj.css({"top": windowHeight/2-popupHeight/2,'left':windowWidth/2-popupWidth/2});
});
//隐藏弹出框
function hideDiv(div_id) {   
    $("#mask").remove();   
    $("#" + div_id).animate({left: 0, top: 0, opacity: "hide" }, "slow");
	$("#" + div_id).remove();   
}

 2、html引用页代码

<!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>弹框demo测试</title>
<script type='text/javascript' src='/test/jquery.min.js'></script>
<script type='text/javascript' src='/test/easybox.js'></script>
<style type="text/css">
        .pop-box {   
            z-index: 9999; /*这个数值要足够大，才能够显示在最上层*/  
            margin-bottom: 3px;   
            display: none;   
            position: absolute;   
            background: #FFF;   
            border:solid 1px gray;
			width:300px;   
        }   
          
        .pop-box h4 {   
            color: black;   
            cursor:default;   
            height: 18px;   
            font-size: 14px;   
            font-weight:bold;   
            text-align: left;   
            padding-left: 8px;   
            padding-top: 4px;   
            padding-bottom: 2px;   
            background: url("../images/header_bg.gif") repeat-x 0 0;   
        }   
          
        .pop-box-body {   
            clear: both;   
            margin: 4px;   
            padding: 2px;   
        } 
        
        
        .mask {   
            color:#C7EDCC;
            background-color:#C7EDCC;
            position:absolute;
            top:0px;
            left:0px;
            filter: Alpha(Opacity=60);
        }
		.pop-box-title{
			height:30px;
			background:#109341;
			line-height:30px;
			padding-left:6px;
			color:white;
			position:relative;
		}
		.pop-box-bottom{
			height:30px;
		}
		.pop-box-bottom input{
			float:right;
			margin-right:10px;
		}
		.pop-box-close{
			position:absolute;display:block;height:12px;width:12px;color:white;right:6px;top:-3px;text-decoration:none;
		} 
    </style>
	<script language=javascript type="text/javascript">
	function confirm(id){
		$.confirm('确认框','是确认删除',function(){
			alert('你确定删除'+id);
		},500);
	}
	function prompt(id){
		var bb= $.prompt('修改密码','请输入密码',function(data){
			alert(data);
		},500);
	}
	function showDiv(id){
		$html = "<div style=\"width:550px;height:600px;\"><input type=button id=btnTest1  value='confirm' onclick=\"confirm(1)\"/></div>";
		$.easyBox('aa',$html,'400');
	}
   </script>
</head>
<body style="height:12000px;">

    <input type=button id=btnTest  value='alert' onclick="$.alert('弹窗测试','你填写的用户名是stelin',500);"/>
    <input type=button id=btnTest1  value='confirm' onclick="confirm(1)"/>
    <input type=button id=btnTest1  value='prompt' onclick="prompt(1)"/>
	<a href="javascript:showDiv(1);">弹出层</a>
	<br>
</body>
</html>

 

分享到：
| 50个jQuery代码段帮你成为更出色的JS开发者
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics