首页 > 代码库 > 弹框组件
弹框组件
因为项目中使用的较多,因此封装了一个组件,便于使用。
/**@file 弹框组件*@description 用于所有提示弹框*@time 2016/11/29*/function PopModel(options) { var that = this; this.defaults = { width: ‘100px‘, // 默认框 height: ‘120px‘, // 默认高 isMask: true, // 是否遮罩 dir: ‘mid‘, // mid中间,left左下,right右下 addClass: ‘‘, // 设置不同样式的class headHtml: ‘<button type="button" class="close">关闭</button>‘, // 头部,不需要直接设置为空 bodyHtml: ‘‘,// 内容 footHtml: ‘<input type="button" value="http://www.mamicode.com/确定" class="confirm"><input type="button" value="http://www.mamicode.com/取消" class="cancel">‘,// 底部,不需要直接设置为空 confireFn: function () {}, // 确认回调 cancelFn: function () {} // 取消回调 }; this.opts = $.extend({}, this.defaults, options); this.dialogWrap = $(‘<div class="dialog-wrap">‘); this.modal = $(‘<div class="qbb-dialog ‘ + this.opts.addClass + ‘" style="position:fixed;border-radius:5px;background:#fff;z-index:99999;width:‘+ this.opts.width+‘;height:‘+ this.opts.height+‘">‘); this.header = $(‘<div class="modal-header">‘); this.obody = $(‘<div class="modal-body">‘); this.footer = $(‘<div class="modal-footer">‘); this.mask = $(‘<div class="mask" style="position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999;background:#000;opacity:0.5">‘); // 遮罩 this.objDir(this.modal, this.opts.dir); if (this.opts.headHtml != ‘‘) { this.header.append(this.opts.headHtml); this.modal.append(this.header); } if (this.opts.bodyHtml != ‘‘) { this.obody.append(this.opts.bodyHtml); this.modal.append(this.obody); } if (this.opts.footHtml != ‘‘) { this.footer.append(this.opts.footHtml); this.modal.append(this.footer); } if (this.opts.isMask) { $(this.dialogWrap).append(this.mask); } this.dialogWrap.append(this.modal); $(‘body‘).append(this.dialogWrap); $(document).on(‘click‘, ‘.mask, .dialog-wrap .close‘, function () { that.closeFn(); }); $(this.footer).find(‘.confirm‘).on(‘click‘, function() { that.opts.confireFn(); that.closeFn(); }); $(this.footer).find(‘.cancel‘).on(‘click‘, function() { that.opts.cancelFn(); that.closeFn(); })}PopModel.prototype = { constructor: PopModel, // 关闭函数 closeFn: function () { this.dialogWrap.remove(); }, // 位置函数 objDir: function (o, dir) { var w = $(o).outerWidth(true); var h = $(o).outerHeight(true); var winW = $(window).width(); var winH = $(window).height(); var oTop = ( winH - h )/2; var oLeft = ( winW - w )/2; if (dir == ‘mid‘) { $(o).css({‘left‘:oLeft, ‘top‘:oTop}); } else if (dir == ‘left‘) { $(o).css({‘left‘:0, ‘bottom‘:0}); } else if (dir == ‘right‘) { $(o).css({‘right‘:0, ‘bottom‘:0}); } }}
调用:
new PopModel({});
弹框组件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。