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 οnclick="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 οnclick="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 οnclick="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' οnclick=\"confirm(1)\"/></div>";
$.easyBox('aa',$html,'400');
}
</script>
</head>
<body style="height:12000px;">
<input type=button id=btnTest value='alert' οnclick="$.alert('弹窗测试','你填写的用户名是stelin',500);"/>
<input type=button id=btnTest1 value='confirm' οnclick="confirm(1)"/>
<input type=button id=btnTest1 value='prompt' οnclick="prompt(1)"/>
<a href="javascript:showDiv(1);">弹出层</a>
<br>
</body>
</html>