html部分
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="jquery/jquery-1.8.2.min.js"></script>
<script src="jquery/yuanBox.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/qiyezhan.css">
<script>
// $(function () {
// $(".c").bind("click", function () {
// $("div").yuanBox("alert",{"title":"点击","sure":"确定","main":"您已经成功！"});
// });
// })
// $(function () {
// $(".c").bind("click", function () {
// $("div").yuanBox("confirm",{"title":"点我","sure":"确定","cancel":"取消"});
// });
// })
$(function () {
// $(".c").bind("click", function () {
$("div").yuanBox("prompt",{"name":"点我","num":"账号","password":"密码","submit":"提交","del":"清除"});
// });
})
</script>
<title></title>
</head>
<body>
<!--<a href="javascript:;" class="c">click</a>-->
<div></div>
</body>
</html>
jquery部分（也就是要引入的JS）
/**
* Created by maker on 2016/6/30.
*/
(function($) {
var _template = {
//弹出框模板
alert : function (data) {
return '<button id="charge">' + data.title + '</button>'+ '<div id="fade" class="black_overlay">'+
'</div>'+
'<div id="MyDiv" class="white_content">'+
'<p style="padding: 0;margin: 0;height: 40px;line-height: 30px">'+"提示："+'<button type="button" class="pic"><span class="on" aria-hidden="true">×</span></button></p>'+
'<div class="inhert">'+data.main+
'</div>'+
'<button id="Yes" class="lf-btnR">' + data.sure + '</button>'
},
//判断框模板
confirm : function (data) {
return '<button id="charge">' + data.title + '</button>'+ '<div id="fade" class="black_overlay">'+
'</div>'+
'<div id="MyDiv" class="white_content">'+
'<p style="padding: 0;margin: 0;height: 40px;line-height: 30px">'+"提示："+'<button type="button" class="pic"><span class="on" aria-hidden="true">×</span></button></p>'+
'<div class="inhert">'+
'<div style="width: 20%;float: left;">'+
'<img style="width: 50px;height: 50px;margin-top: 20px;margin-left: 30px;" src="../judge/images/t0195dc6253b6fa4b54.gif">'+
'</div>'+
'<div style="width: 80%;float: left;">'+
'<p>'+"你确定删除吗？"+'</p>'+
'</div>'+
'</div>'+
'<div style="width: 50%;float: left;">'+
'<button id="Yes" class="lf-btn">' + data.sure + '</button>'+
'</div>'+
'<div style="width: 50%;float: left;">'+
'<button id="No" class="rt-btn">' + data.cancel + '</button>'+
'</div>'+
'</div>'
},
//提交框
prompt : function (data) {
return '<button id="charge">'+data.name+'</button><br>'+ '<span>'+"name:"+'</span><input class="inside" id="rest"><br>'+
'<span>'+"word:"+'</span><input class="inside" id="rests"><br>'+
'<span>'+"hide:"+'</span><input class="inside" id="hide">'+
'<div id="fade" class="black_overlay">'+
'</div>'+
'<div id="MyDiv" class="white_content">'+
'<p style="padding: 0;margin: 0;height: 40px;line-height: 30px;font-family: Microsoft YaHei">'+"提示："+'<button type="button" class="pic"><span class="on" aria-hidden="true">×</span></button></p>'+
'<div class="inhertR">'+
'<span class="nu">'+data.num+"："+'</span><input class="down" id="name"><br>'+
'<span class="ma">'+data.password+"："+'</span><input class="down" id="word">'+
'<input class="display-none" value="21212" id="dis">'+
'</div>'+
'<div class="modal-footer">'+
'<button type="button" class="btn" id="btn">'+data.submit+'</button>'+
'<button type="button" class="btn" id="empty">'+data.del+'</button>'+
'</div>'+
'</div>'
}
}
//声明方法集合
var methods = {
//初始化
init : function (opt) {},
//警示框
/**
* 点击后弹出
*/
alert : function (data) {
var temp = _template.alert(data);
$(this).html(temp);
$(document).on("click","#charge", function () {
document.getElementById("MyDiv").style.display='block';
document.getElementById("fade").style.display='block' ;
});
$("#Yes" ).bind("click", function () {
document.getElementById("MyDiv").style.display='none';
document.getElementById("fade").style.display='none';
})
$("#No" ).bind("click", function () {
document.getElementById("MyDiv").style.display='none';
document.getElementById("fade").style.display='none';
})
$(".pic" ).bind("click", function () {
document.getElementById("MyDiv").style.display='none';
document.getElementById("fade").style.display='none';
})
},
//判断框
confirm : function (data) {
var temp = _template.confirm(data);
$(this).html(temp);
$(document).on("click","#charge", function () {
document.getElementById("MyDiv").style.display='block';
document.getElementById("fade").style.display='block' ;
});
$("#Yes" ).bind("click", function () {
document.getElementById("MyDiv").style.display='none';
document.getElementById("fade").style.display='none';
})
$("#No" ).bind("click", function () {
document.getElementById("MyDiv").style.display='none';
document.getElementById("fade").style.display='none';
})
$(".pic" ).bind("click", function () {
document.getElementById("MyDiv").style.display='none';
document.getElementById("fade").style.display='none';
})
},
//提交框
prompt : function (data) {
var tem = _template.prompt(data);
$(this).html(tem);
$(document).on("click","#charge", function () {
document.getElementById("MyDiv").style.display='block';
document.getElementById("fade").style.display='block' ;
});
$("#btn").bind("click", function () {
document.getElementById("MyDiv").style.display='none';
document.getElementById("fade").style.display='none';
$("#rest")[0].value = $("#name").val();
$("#rests")[0].value = $("#word").val();
$("#hide")[0].value = $("#dis").val();
document.getElementById("name").value = "";
document.getElementById("word").value = "";
document.getElementById("dis").value = "";
})
$("#empty").bind("click", function () {
document.getElementById("name").value = "";
document.getElementById("word").value = "";
document.getElementById("dis").value = "";
})
$(".pic" ).bind("click", function () {
document.getElementById("MyDiv").style.display='none';
document.getElementById("fade").style.display='none';
})
}
}
$.fn.yuanBox = function (method) {
if(methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
}else if(typeof(method) === 'object' || !method) {
return methods.init.apply(this, arguments);
}else{
$.error('Method ' + method + ' does not exist in this project');
}
}
})(jQuery);
CSS部分
@charset "utf-8";
/* CSS Document */
.main{width:100%;}
.heading{width:100%;height:40px;background: #3c3c3c}
.head{margin:0 auto;height:40px;width:1170px;background: #3c3c3c}
.zuo{width:200px;height:40px;float:left;}
.you{width:400px;height:40px; overflow:hidden;float:right;}
.top{width:100%;height:90px;background:ghostwhite}
.logo{width:1170px;height:90px;margin:0 auto;}
.logo-tu{width:200px;height:70px;float:left;background:url(../images/logo.png) no-repeat;margin-top: 10px}
.logo-yu{width:370px;height:70px;float:left;}
.inp{width:600px;height:70px;float:left;}
.zhong{width:100%;height:80px;}
.wir{width:1170px;height:80px;margin:0 auto;}
.shang{height:80px;}
.shang-zuo{width:900px;height:200px;float:left;}
.shang-you{width:270px;height:200px;float:right;}
.xiashang{width:100%;heigt:40px;}
.xiashang-1{width:1170px;height:40px;margin:0 auto;}
.xiaxia{width:100%;height:400px;}
.xiaxia-1{width:1170px;height:400px;margin:0 auto;overflow: hidden}
.logo-yu p{text-align: center;line-height: 90px;font-size: 30px;font-family: '微软雅黑', '宋体';color: #2d64b3;margin-bottom: 0;}
.zuo p{text-align: left;line-height: 40px;margin-bottom: 0;}
.zuo p a{;text-decoration:none;color: #ffffff}
.you ul{;padding-left: 0px;float: right;margin: 0}
.you ul li{list-style-type:none;float: left;color: #ffffff;margin-left: 10px;line-height: 40px;font-size: 12px}
.you ul li a{text-decoration:none; font-size: 12px;color: #ffffff}
.search{ padding:4px;background:#ffffff;width: 400px;float: right;margin-top: 25px;border: 1px solid #BBB;height: 42px;}
.search-1{width: 360px;height: 32px;border: none}
.search-2{ height: 24px;cursor: pointer;
border: 0;
margin: 4px 0 0 4px;width: 24px;;float: right; border:none; display: block; background: #fff url(../css/bs.png) no-repeat center 0px;}
.search-2:hover{ background: #fff url(../css/bs.png) no-repeat 0 -24px;}
.select{float: right;height: 42px;margin-top: 15px;width: 55px}
.middle{width: 800px;height: 200px;;margin: 0 auto;}
.in{width: 350px;height: 40px;margin-top: 20px; }
.shang span{font-family: 黑体;font-size: 20px;color: #2d64b3;margin-top: 10px}
.list{width: 1170px;height: 400px;}
.list-style{ padding-top: 15px;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fcfcfc), color-stop(1, #ececec));
width:25%;
height: 80px;
background-color: #ececec;
border-radius: 8px;
display: block;
/*font-size: 25px;*/
/*color:cyan;*/
overflow: hidden;
float: left;}
.p1{ color:#08c;
font-size: 20px;
padding-left: 30px;
margin: 0}
.but{width: 100px;height: 40px;margin-left: 100px;margin-top: 10px;background:ghostwhite }
.list-style p span:hover{
color: #005580;
}
.list-style p{height: 30px;line-height: 30px;margin: 0}
.p1:hover{
color: #005580;
}
.but-1{width: 100px;height: 40px;margin-top: 20px;background:ghostwhite}
.list-style p span{float: right;margin-right: 10px;text-decoration:none;cursor: pointer;color:#08c ;font-size: 6px;}
.bott{width:100%;height:70px;}
.bott-page{width:1170px;height:70px;margin:0 auto;margin-top: 20px}
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.40;
filter: alpha(opacity=80);
}
/*.white_content {*/
/*background: url("../images/bg.jpg")repeat-x;*/
/*display: none;*/
/*position: absolute;*/
/*top:30%;*/
/*left: 36%;*/
/*width: 25%;*/
/*height: 25%;*/
/*border: 5px solid lightblue;*/
/*background-color: white;*/
/*z-index:1002;*/
/*overflow: auto;*/
/*}*/
.white_content {
margin: 0 auto;
background: url("../images/bg.jpg")repeat-x;
display: none;
position: absolute;
top:30%;
left: 40%;
width: 260px;
height: 180px;
border: 5px solid lightblue;
background-color: white;
z-index:1002;
/*overflow: auto;*/
}
.pic{cursor: pointer;width: 25px;height: 25px;float: right; float: right;
font-size: 21px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;background: no-repeat;border: none}
.white_content p{padding:20px 0 0 40px}
.a{;font-size: 25px;font-family: 黑体;cursor: pointer;margin-left: 90px;}
.a:hover{color: red}
.bt{float: right;margin-top: -25px;margin-right: 70px}
.divide-1{width: 460px;height: 80px;line-height: 40px;float: left}
.divide-2{;height: 80px;float: left}
#help{
width:50px;
height:30px;
cursor: pointer;
color: red;
/*position:fixed;*/
/*left:60px;*/
/*bottom:100px;*/
}
.details{width: 254px;height:90px ;text-indent:2em;}
.inhert{
width: 100%;height: 50%;border-bottom: 1px solid #dcdcdc;text-align: center;line-height: 90px;
}
.inhertR{
width: 100%;height: 50%;border-bottom: 1px solid #dcdcdc
}
.btn{float: right;margin-top:15px;margin-right: 8px;border-radius: 2px;border: none;background:#f5f5f5;cursor: pointer;font-size: 14px;font-family: '微软雅黑'}
.display-none{display: none}
.down{margin-top: 10px;border: none}
.nu{margin-left: 20px;font-size: 14px;font-family: '微软雅黑'}
.ma{margin-left: 20px;font-size: 14px;font-family: '微软雅黑'}
.lf-btnR{float: right;margin-right: 20px;cursor: pointer;background:#f5f5f5;border: none;border-radius: 2px ;width: 50px;font-family:"Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;font-size: 14px;margin-top: 15px}
.lf-btn{float: right;margin-right: 40px;cursor: pointer;background:#f5f5f5;border: none;border-radius: 2px ;width: 50px;font-family:"Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;font-size: 14px;margin-top: 15px}
.rt-btn{margin-left: 40px;cursor: pointer;background:#f5f5f5;border: none;border-radius: 2px ;width: 50px;font-family:"Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;font-size: 14px;margin-top: 15px}