【积淀】jQuery写个简单的模态窗口组件

前言

最近在翻新7月份一个项目的代码，确实感觉现在的水平提升了不止一个档次啊^_ ^，之前花了一个近1500行代码完成的交互效果，现在几百行就搞定，而且不依赖三方的UI组件。我现在的编码有自己的设计模式，像模态这些通用的功能我习惯整理在util模块里，其他模块里如果需要调用new一个对象即可。今天不介绍整个util模块的代码，就拎一个模态组件和大家分享一下，如果觉得不错 就拿去用吧。真的很不建议为了实现一个简单的功能去网上下一个重量级的UI组件，而且还不好维护，倒不如自己手写一个。

演示一下效果

myAlert

细心的同学会发现 这个alert是没有关闭按钮的，为什么呢？因为它是定时关闭的，而且结合淡入淡出的动画体验效果会很好哦。

myConfirm

这个就比较常见了，不过这种样式我还是很喜欢的，简洁美，有没有 ^ _ ^

上代码吧

css样式

css样式就70行，大可以直接注释一下打包到你的base.css里。

/*模态窗口*/
.myMask{
position: fixed;
width: 100%;
height: 100%;
z-index: 9999;
background: rgba(0,0,0,0.4);
background: rgb(0,0,0)\9;
filter:alpha(opacity=0.4)\9;
top: 0;
display: none;
}
.hide{
display: none;
}
.modal{
position: absolute;
top: 30%;
left: 0;
right: 0;
margin:auto;
z-index: 10000;
width: 360px;
height: 120px;
background:#fff;
}
.modal.myConfirm{
height: 150px;
}
.modal>h2{
text-align: left;
background: rgb(238,34,102);
color: #fff;
height: 40px;
line-height: 40px;
padding-left: 20px;
font-size: 13px;
}
.modal>p{
padding: 10px 20px;
padding-top: 20px;
padding-left:25px;
font-size: 13px;
color: #777;
}
.confirmBtns{
position: absolute;
bottom: 0;
height: 40px;
font-size: 0;
width: 100%;
border-top: 1px solid #eee;
}
.confirmBtns>a{
display: inline-block;
vertical-align: top;
font-size: 12px;
width: 50%;
height: 100%;
text-align: center;
color: #888;
line-height: 40px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.confirmBtns>a:hover{
background-color:rgb(255,251,237);
color: #666;
}
.confirmBtns>a.first{
border-right: 1px solid #eee;
}

JavaScript代码

定义组件

/**
* [通用工具模块]
* @param  {[type]} $    [JQuery对象]
* @param  {[type]} self [单例上下文]
* @return {[type]}      [公开方法]
*/
Module_util:function($,self){
var _wraper=$('#wrap'),//内容容器
return{
/**
* [myAlert description]
* @param  {[type]} $txt [description]
* @return {[type]}      [description]
*/
myAlert:function($txt){
/*创建DOM结构*/
_wraper.append('<div class="myMask" id="myMask"></div>');
$('#myMask').html('<div id="myAlert" class="modal myAlert hide"><h2 id="alertTitle">温馨提示</h2><p>哎呀*_*，您<span id="alertTxt">'+$txt+'</span></p></div>');
/*绑定功能*/
$('#myMask').fadeIn();
$('#myAlert').show();
/*延迟800ms后关闭并销毁DOM*/
window.setTimeout(function(){
$('#myMask').fadeOut();
$('#myAlert').remove();
$('#myMask').remove();
},800);
},
/**
* [myConfirm 确认框组件]
* @param  {[type]} $title  [确认框标题]
* @param  {[type]} $txt    [确认的内容]
* @param  {[type]} $sureCallback   [确定的回调函数]
* @param  {[type]} $cancelCallback [取消的回到函数]
* @return {[type]}         [void]
*/
myConfirm:function($title,$txt,$sureCallback,$cancelCallback){
/*创建DOM结构*/
_wraper.append('<div class="myMask" id="myMask"></div>');
$('#myMask').html('<div id="myConfirm" class="modal myConfirm hide"><h2 id="confirmTitle">'+$title+'</h2><p>您确定要<span id="confirmTxt">'+$txt+'</span> ?</p><div class="confirmBtns"><a href="javascript:void(0)" id="confirmYes" class="first">确定</a><a href="javascript:void(0)" id="confirmNo">取消</a></div></div>');
/*绑定功能*/
$('#myMask').fadeIn();
$('#myConfirm').show();
/*确认回调*/
$('#confirmYes').on('click',function(){
if($sureCallback){
$sureCallback();
$('#myMask').fadeOut();
$('#myConfirm').remove();
$('#myMask').remove();
}
});
/*取消回调*/
$('#confirmNo').on('click',function(){
if($cancelCallback){
$cancelCallback();
$('#myMask').fadeOut();
$('#myConfirm').remove();
$('#myMask').remove();
}
});
}
}
}

如何调用

/**
* [操作模块]
* @param  {[type]} $    [JQuery对象]
* @param  {[type]} self [单例上下文]
* @return {[type]}      [公开方法]
*/
Module_operate:function($,self){
var util=new self.Module_util($,self);
/**
* [deleteSome 批量删除]
* @return {[type]} [description]
*/
function deleteSome(){
artWrap.on('click','#btn-selectd-delete',function(){
var selectArray=$('.shop-product-item.checked');
if(selectArray.length===0){
util.myAlert('请先选择要删除的商品');
}else{
util.myConfirm('删除提示','删除这些商品吗',function(){
selectArray.remove();
shopCheckProduct();
countTotal();
},function(){
return false;
});
}
});
}
return{
/*对外暴露的模块初始化接口*/
init:{
/*加载批量删除功能*/
deleteSome();
//........
}
}
}

好了，上面只是代码的片段，如果看不懂可以出门右转往前翻我的那篇《我的JavaScript设计模式》的文章，或者给我留言，我会尽快回复 ＾＿＾