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>

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值