jquery弹出层

近段时间比较忙，要全新开发一个站点，包括前台页面和后台php，本来前台css'准备用bootstrap的，但是考虑到对ie不怎么兼容，只好自己动手写了，写了一些公用的css和jquery，由于时间有限，写的不是很灵活，基本够一般情况使用，另外也将一些jquery'框架进行了二次封装，等有时间陆续上传，由于我前台css和js只是一般水平，让大家见笑了

<!--按钮-->
<button class='comm-btn-orange comm-btn popup-box'>点击查看</button>
<!--弹出层-->
<div class="popup hidden" id="popup">
    <div class="popup-head">
    <span>编辑学校</span>
        <del class='cancel'>×</del>
    </div>
    <div class="popup-body">
   
    <p>
        这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容
        </p>
    </div>
    <div class="popup-foot">
    <input name="submit" id='sbt' type="button" value="确定" class="comm-btn comm-btn-blue">
    <input name="cancel" type="button" value="取消" class="comm-btn cancel">
    </div>
</div>
 
<!--遮罩-->
 <div class='cancel' id='bg-div'></div> 
 <style>
 .hidden {display:none;}
 .popup {
top: 60%;
min-width: 400px;
max-width:600px;
width:auto;
height: auto;
max-height : 450px;
overflow: auto;
position: fixed;
_position: absolute;
left: 50%;
margin-left: -300px;
top: 50%;
margin-top: -200px;
border: #ccc solid 1px;
background: #fff;
box-shadow: #333 0px 3px 7px;
z-index: 999;
}
 .popup-head {
border-bottom: #eee solid 1px;
padding: 20px;
font-size: 20px;
position: relative;
}
.popup-foot {
background: #f5f5f5;
padding: 10px;
border-top: 1px solid #DDDDDD;
box-shadow: 0 1px 0 #FFFFFF inset;
text-align: right;
}
 .popup-head del {
display: block;
position: absolute;
right: 20px;
top: 13px;
width: 20px;
height: 20px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 30px;
text-shadow: 0 1px 0 #FFFFFF;
cursor: pointer;
color: #ccc;
}
p {
margin: 0 0 10px 0;
}


.popup-body {
padding: 20px;
}
/***遮罩***/
.bg-div {
opacity: 0.5;
cursor: pointer;
position: fixed;
top:0;
left:0;
_position: absolute;
z-index: 998;
width: 100%;
_height: 23631px;
height:100%;
background: black;
}






/*button**/


.comm-btn {
display: inline-block;
zoom: 1;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font-size: 16px;
line-height: 100%;
border: none;
color: #333;
border-radius: 2px;
padding: 0.5em 1.5em;
background: #ebebeb;
}
.comm-btn:hover {
border-color: #adadad;
}
.comm-btn-orange {
color: #fef4e9;
background: #f78d1d;
}
.comm-btn-orange:hover {
color: #fef4e9;
background: #F78D62;
}
.comm-btn-blue:hover {
background: #007ead;
}
.comm-btn-blue {
color: #d9eef7;
background: #42B8DD;
}
 </style>
 <script src='./jquery.js'></script>
 <script>


$.extend({
'popup' :function(option){
var width = option['width'] ? option['width'] : '300px';
var title = option['title'] ? option['title'] : '标题';
var content = option['content'] ? option['content'] : '内容';
option['btnShow'] ? '' : $('.popup-foot').addClass('hidden');
/**显示遮罩**/
$('#bg-div').addClass('bg-div');


   /**设置弹层标题和内容,宽度并显示***/
$('.popup-head span').text(title);
$('.popup-body p').html(content);
$('.popup').css({'width': width});
$('.popup').removeClass('hidden');

/**点击X,遮罩，取消按钮,关闭弹层***/
$('.cancel').live('click',function(){
$('#bg-div').removeClass('bg-div');
$('.popup').addClass('hidden');
});
/***如果显示确认按钮,为了偷懒,假设content是一个表单form***/
if(option['btnShow']) {
$("input[name='submit']").click(function(){
$.sbt(option['url']);
});
}
},
/**写的默认提交方法**/
'sbt' : function(){
var url = arguments[0] ? arguments[0] : 'http://www.xxxxxx.com';
var data = $('form').serialize();
$.ajax({
'url' : url,
'data' : data,
'type' : 'post',
'async' : false,
'success' : function(result) {
alert('ok');
},
'error' : function(){
alert('请求失败！');
}

});
}
});


/***调用例子***/
$(function(){
$('.popup-box').bind('click',function(){
$.popup({
width : '700px',
title : '这是标题',
btnShow : true,
content : "这里可以写文字也可以写html代码,<form><input type='text' name='user'/></form>",
});
});
/**也可以重写提交方法*/
$.sbt = function(){
alert('乱写一个');
}
});


 </script>