基于require, zepto, underscore, bootstrap
1、html代码
<div id="layMainStore" class="layout-content">
<i id="cancleX" class="cancle-x layoutCancle">╳</i>
<div class="layout-info">
<div id="layoutTxt" class="layout-txt">
</div>
<div class="layout-btns">
<a id="layoutConfirm" class="btn btn-warning confirm">确定</a>
<a id="layoutCancle" class="btn btn-default cancle">取消</a>
</div>
</div>
</div>
2、css代码
bootstrap改造部分略
@charset 'UTF-8';
.lay-mask{
position: fixed;
z-index: 1000;
top: 0px;
left: 50%;
margin-left: -50%;
width: 100%;
height: 100%;
background-color: #333;
opacity: .7;
}
.layout-content{
position: fixed;
z-index: 1111;
width: 88%;
top: 35%;
left: 50%;
margin-left: -44%;
background-color: #fff;
border: 1px solid #ededed;
border-radius: 5px;
padding: 12px;
overflow: auto;
}
.layout-content .cancle-x{
position: absolute;
font-style: normal;
color: #666;
font-size: 18px;
right: 0px;
top: 0px;
padding: 12px;
}
.layout-content .layout-info{
margin-top: 25px;
}
.layout-content .layout-info .layout-txt{
text-align: center;
margin-bottom: 25px;
font-size: 16px;
}
.layout-content .layout-info .layout-btns{
text-align: center;
margin-bottom: 10px;
}
.layout-content .layout-btns .confirm{
width: 120px;
font-size: 16px;
background-color: #fe9900;
border-color: #fe9900;
}
.layout-content .layout-btns .cancle{}
3、js代码
//引用部分略; /*** * chenfeng_lian * @param options * @returns */ define([ 'zepto', 'underscore' ], function($, _) { function Layout(options){ this.options = $.extend(true, Layout.defaults, options); this.mask = null; this.$el = null; this.el = null; this.init(); } Layout.prototype = { init: function() { var self = this; self.getLayoutHtml(); }, getLayoutHtml: function() { var self = this, ops = self.options; //baseurl 代码模块 var baseUrl = 'text!'+base.context+'/html5/js_lib/common_template/layout.html'; require([baseUrl], function(partial) { $('body').append(_.template(partial)()); $('#layoutTxt').html(ops.sHtml); self.setMask(); self.$el = $('#layMainStore'); $('#'+ops.confirm).on('click',{opts: self}, self.fnConfirm); $('.'+ops.cancle).on('click', {opts: self}, self.fnCancle); }); }, common: {}, fnConfirm: function(e) { var self = e.data.opts; self.options.callbacks.fnConfirm && self.options.callbacks.fnConfirm(); self.mask.remove(); self.destory(); return false; }, fnCancle: function(e) { var self = e.data.opts; self.options.callbacks.fnCancle && self.options.callbacks.fnCancle(); self.mask.remove(); self.destory(); return false; }, setMask: function() { this.mask = $('<div class="lay-mask" id="layMaskStore"></div>').appendTo(this.options.parent); }, destory: function() { this.$el.remove(); } } Layout.defaults = { parent: 'body', sHtml: '这部分内容自己可选?', confirm: 'layoutConfirm', cancle: 'layoutCancle', callbacks: { fnConfirm: function() { window.console && console.log('fnConfirm...'); }, fnCancle: function() { window.console && console.log('fnCancle...'); } } }; return Layout; });