diff --git a/.gitignore b/.gitignore index 520ca80..05de17b 100644 --- a/.gitignore +++ b/.gitignore @@ -47,3 +47,4 @@ Temporary Items .apdisk node_modules/ +.idea/ diff --git a/Changelog.md b/Changelog.md new file mode 100644 index 0000000..afa530d --- /dev/null +++ b/Changelog.md @@ -0,0 +1,3 @@ +### 2.1.0 (2018-04-12) ++ 增加 弹窗支持按钮点击后不关闭； ++ 增加 弹窗显示后，body 内容不可以再滚动配置项； diff --git a/README.md b/README.md index a0a7f58..79e70a1 100644 --- a/README.md +++ b/README.md @@ -83,6 +83,11 @@ $(document).on('click', '#btn-01', function() { '提示' 标题文字 + + bodyNoScroll + false + body 内容不可以滚动 + closeBtnShow false @@ -269,3 +274,16 @@ npm install grunt serve ``` +**3、grunt 命令** +``` +grunt serve // 浏览 Demo: 本地服务器 +grunt dist // 开发环境: 生产实际项目使用代码 +grunt src // 开发环境: 本地服务器; 实时刷新 +``` + +## 最新版本 +### 2.1.0 (2018-04-12) ++ 增加 弹窗支持按钮点击后不关闭； ++ 增加 弹窗显示后，body 内容不可以再滚动配置项； + +[全部更新日志](https://github.com/sufangyu/dialog2/blob/master/Changelog.md) \ No newline at end of file diff --git a/_config.json b/_config.json index e26eedd..a2a2495 100644 --- a/_config.json +++ b/_config.json @@ -1,7 +1,7 @@ { "name": "dialog", "description": "兼容jQuery与Zepto的移动端弹窗插件。", - "version": "2.0.0", + "version": "2.1.0", "homepage": "https://github.com/sufangyu/dialog2", "download": "https://github.com/sufangyu/dialog2/archive/master.zip", "bugs": "https://github.com/sufangyu/dialog2/issues", @@ -13,7 +13,6 @@ "dist": { "dir": "dist" - }, "src":{ diff --git a/dist/js/dialog.js b/dist/js/dialog.js index 93cbaab..19126ab 100644 --- a/dist/js/dialog.js +++ b/dist/js/dialog.js @@ -1,7 +1,7 @@ /** - * dialog v2.0.0 - * @date 2016-10-12 - * @author 方雨_Yu + * dialog v2.1.0 + * @date 2018-04-12 + * @author 方雨_Yu * @home https://github.com/sufangyu/dialog2 * @bugs https://github.com/sufangyu/dialog2/issues * Licensed under MIT @@ -31,6 +31,8 @@ */ _init: function() { var self = this; + + console.log('初始化弹窗'); clearTimeout(self.autoCloseTimer); @@ -39,6 +41,13 @@ self.platform = mobileUtil.platform; // 访问设备平台 self.dislogStyle = self.settings.style==='default' ? self.platform : self.settings.style; // 弹窗风格, 默认自动判断平台; 否则, 为指定平台 + + // 创建弹窗显示时, 禁止 body 内容滚动的样式并且添加到 head + if ($('#dialog-body-no-scroll').length === 0) { + var styleContent = '.body-no-scroll { position: absolute; overflow: hidden; width: 100%; }'; + $('head').append(''); + } + self._renderDOM(); self._bindEvents(); }, @@ -62,24 +71,30 @@ // 确定按钮关闭弹窗 self.$confirmBtn.on(mobileUtil.tapEvent, function(ev) { - self.closeDialog(); - self.settings.onClickConfirmBtn(); + var callback = self.settings.onClickConfirmBtn(); + if (callback || callback === undefined) { + self.closeDialog(); + } }).on('touchend', function(ev) { ev.preventDefault(); }); // 取消按钮关闭弹窗 self.$cancelBtn.on(mobileUtil.tapEvent, function(ev) { - self.closeDialog(); - self.settings.onClickCancelBtn(); + var callback = self.settings.onClickCancelBtn(); + if (callback || callback === undefined) { + self.closeDialog(); + } }).on('touchend', function(ev) { ev.preventDefault(); }); // 关闭按钮关闭弹窗 self.$closeBtn.on(mobileUtil.tapEvent, function(ev) { - self.closeDialog(); - self.settings.onClickCloseBtn(); + var callback = self.settings.onClickCloseBtn(); + if (callback || callback === undefined) { + self.closeDialog(); + } }).on('touchend', function(ev) { ev.preventDefault(); }); @@ -112,9 +127,11 @@ if (self.settings.buttons.length) { $.each(self.settings.buttons, function(index, item) { self.$dialogContentFt.children('button').eq(index).on(mobileUtil.tapEvent, function(ev) { - self.closeDialog(); - item.callback(); ev.preventDefault(); + var callback = item.callback(); + if (callback || callback === undefined) { + self.closeDialog(); + } }); }); } @@ -192,6 +209,10 @@ self.$dialog.append(self.$dialogContent); $('body').append(self.$dialog); + if (self.settings.bodyNoScroll) { + $('body').addClass('body-no-scroll'); + } + // 设置弹窗提示内容最大高度 if (self.settings.contentScroll) { self._setDialogContentHeight(); @@ -235,7 +256,11 @@ // 设置弹窗提示内容最大高度 if (self.settings.contentScroll) { self._setDialogContentHeight(); - } + } + + if (self.settings.bodyNoScroll) { + $('body').addClass('body-no-scroll'); + } break; case 'toast': @@ -263,6 +288,10 @@ self.$dialog.append(self.$dialogContent); $('body').append(self.$dialog); + if (self.settings.bodyNoScroll) { + $('body').addClass('body-no-scroll'); + } + break; case 'notice': // 添加 toast 类型弹窗标识 @@ -294,6 +323,10 @@ self.$dialog.append(self.$dialogContent); $('body').append(self.$dialog); + if (self.settings.bodyNoScroll) { + $('body').addClass('body-no-scroll'); + } + break; default: console.log('running default'); @@ -436,6 +469,10 @@ self.settings.onClosed(); // 重新初始化默认配置 self.settings = $.fn.dialog.defaults; + + if (self.settings.bodyNoScroll) { + $('body').removeClass('body-no-scroll'); + } }, /** @@ -593,6 +630,7 @@ style : 'default', // alert 与 confirm 弹窗的风格 [ default: 根据访问设备平台; ios: ios 风格; android: MD design 风格 ] titleShow : true, // 是否显示标题 titleText : '提示', // 标题文字 + bodyNoScroll : false, // body内容不可以滚动 closeBtnShow : false, // 是否显示关闭按钮 content : '', // 弹窗提示内容, 值可以是 HTML 内容 contentScroll: true, // alert 与 confirm 弹窗提示内容是否限制最大高度, 使其可以滚动 @@ -679,7 +717,7 @@ }); // 注册快捷事件 tapEvent, 调用: $element.tapEvent(fn); - ['tapEvent'].forEach(function(eventName) { + ;['tapEvent'].forEach(function(eventName) { $.fn[eventName] = function(callback) { return this.on(eventName, callback); }; diff --git a/dist/js/dialog.min.js b/dist/js/dialog.min.js index 1907b01..39ceb71 100644 --- a/dist/js/dialog.min.js +++ b/dist/js/dialog.min.js @@ -1,10 +1,10 @@ /** - * dialog v2.0.0 - * @date 2017-11-29 + * dialog v2.1.0 + * @date 2018-04-12 * @author 方雨_Yu * @home https://github.com/sufangyu/dialog2 * @bugs https://github.com/sufangyu/dialog2/issues * Licensed under MIT */ -!function(a,b,c,d){"use strict";var e=function(){function d(b,c){this.$element=a(b),this.settings=a.extend({},a.fn.dialog.defaults,c)}return d.prototype={_init:function(){var a=this;clearTimeout(a.autoCloseTimer),a.isHided=!1,a.tapBug=a._hasTapBug(),a.platform=f.platform,a.dislogStyle="default"===a.settings.style?a.platform:a.settings.style,a._renderDOM(),a._bindEvents()},_renderDOM:function(){var a=this;a.settings.onBeforeShow(),a._createDialogDOM(a.settings.type),a.settings.onShow()},_bindEvents:function(){var d=this;d.$confirmBtn.on(f.tapEvent,function(a){d.closeDialog(),d.settings.onClickConfirmBtn()}).on("touchend",function(a){a.preventDefault()}),d.$cancelBtn.on(f.tapEvent,function(a){d.closeDialog(),d.settings.onClickCancelBtn()}).on("touchend",function(a){a.preventDefault()}),d.$closeBtn.on(f.tapEvent,function(a){d.closeDialog(),d.settings.onClickCloseBtn()}).on("touchend",function(a){a.preventDefault()}),d.settings.overlayClose&&a(c).on(f.tapEvent,".dialog-overlay",function(a){d.closeDialog()}),d.settings.autoClose>0&&(console.log(d.settings.autoClose/1e3+"秒后, 自动关闭弹窗"),d._autoClose()),a(c).on("webkitAnimationEnd MSAnimationEnd animationend",".dialog-content",function(){d.isHided&&(d.removeDialog(),d.tapBug&&d._removeTapOverlayer())}),d.settings.buttons.length&&a.each(d.settings.buttons,function(a,b){d.$dialogContentFt.children("button").eq(a).on(f.tapEvent,function(a){d.closeDialog(),b.callback(),a.preventDefault()})}),a(b).on("onorientationchange"in b?"orientationchange":"resize",function(){d.settings.contentScroll&&setTimeout(function(){d._resetDialog()},200)}),a(c).on("touchmove",function(b){return!d.$dialog.find(a(b.target)).length}),d.settings.contentScroll&&d._contentScrollEvent(),"android"===d.dislogStyle&&a(".dialog-content-ft > .dialog-btn").ripple()},_createDialogDOM:function(b){var c=this;switch(c.$dialog=a('
'),c.$dialogOverlay=a('
'),c.$dialogContent=a('
'),c.$dialogTitle=a('

'+c.settings.titleText+"

"),c.$dialogContentFt=a('
'),c.$dialogContentBd=a('
'),c.$closeBtn=a('
close
'),c.$confirmBtn=a('"),c.$cancelBtn=a('"),b){case"alert":c.$dialog.addClass("dialog-modal"),c.settings.overlayShow&&c.$dialog.append(c.$dialogOverlay),c.settings.titleShow&&c.$dialogContent.append(c.$dialogTitle),c.settings.closeBtnShow&&c.$dialogTitle.append(c.$closeBtn),c.$dialogContentBd.html(c.settings.content),c.$dialogContentFt.append(c.$confirmBtn),c.$dialogContent.append(c.$dialogContentBd).append(c.$dialogContentFt),c.$dialog.append(c.$dialogContent),a("body").append(c.$dialog),c.settings.contentScroll&&c._setDialogContentHeight();break;case"confirm":if(c.$dialog.addClass("dialog-modal"),c.settings.overlayShow&&c.$dialog.append(c.$dialogOverlay),c.settings.titleShow&&c.$dialogContent.append(c.$dialogTitle),c.settings.closeBtnShow&&c.$dialogTitle.append(c.$closeBtn),c.settings.buttons.length){var d="";a.each(c.settings.buttons,function(a,b){d+='"}),c.$dialogContentFt.append(d).addClass(c.settings.buttonStyle)}else c.$dialogContentFt.append(c.$cancelBtn).append(c.$confirmBtn).addClass(c.settings.buttonStyle);c.$dialogContentBd.html(c.settings.content),c.$dialogContent.append(c.$dialogContentBd).append(c.$dialogContentFt),c.$dialog.append(c.$dialogContent),a("body").append(c.$dialog),c.settings.contentScroll&&c._setDialogContentHeight();break;case"toast":c.$dialog.addClass("dialog-toast"),c.settings.overlayShow&&c.$dialog.append(c.$dialogOverlay);var e=a(c.settings.content);""!==c.settings.infoIcon&&""!==c.settings.infoText?e=a(''+c.settings.infoText+""):""===c.settings.infoIcon&&""!==c.settings.infoText?e=a(''+c.settings.infoText+""):""!==c.settings.infoIcon&&""===c.settings.infoText&&(e=a('')),c.$dialogContentBd.append(e),c.$dialogContent.append(c.$dialogContentBd),c.$dialog.append(c.$dialogContent),a("body").append(c.$dialog);break;case"notice":c.$dialog.addClass("dialog-notice"),"bottom"===c.settings.position&&c.$dialog.addClass("dialog-notice-bottom"),c.settings.overlayShow&&c.$dialog.append(c.$dialogOverlay);var f=a(c.settings.content);""!==c.settings.infoIcon&&""!==c.settings.infoText?f=a(''+c.settings.infoText+""):""===c.settings.infoIcon&&""!==c.settings.infoText?f=a(''+c.settings.infoText+""):""!==c.settings.infoIcon&&""===c.settings.infoText&&(f=a('')),c.$dialogContentBd.append(f),c.$dialogContent.append(c.$dialogContentBd),c.$dialog.append(c.$dialogContent),a("body").append(c.$dialog);break;default:console.log("running default")}},_setDialogContentHeight:function(){var a=this;setTimeout(function(){var b=a.$dialogContentBd.height(),c=a._getDialogContentMaxHeight();a.$dialogContentBd.css({"max-height":c}).addClass("content-scroll"),b>c?a.$dialogContentFt.addClass("dialog-content-ft-border"):a.$dialogContentFt.removeClass("dialog-content-ft-border")},80)},_getDialogContentMaxHeight:function(){var c=this,d=a(b).height(),e=c.$dialogTitle.height(),f=c.$dialogContentFt.height(),g=d-e-f-60;return g=g%2==0?g:g-1},_resetDialog:function(){this._setDialogContentHeight()},_contentScrollEvent:function(){var b=!1,d={x:0,y:0,top:0,left:0};a(c).on("touchstart mousedown",".content-scroll",function(c){var e=c.changedTouches?c.changedTouches[0]:c;return b=!0,d.x=e.clientX,d.y=e.clientY,d.top=a(this).scrollTop(),d.left=a(this).scrollLeft(),!1}).on("touchmove mousemove",".content-scroll",function(c){var e=c.changedTouches?c.changedTouches[0]:c;if(!b)return!1;var f=d.top-(e.clientY-d.y),g=d.left-(e.clientX-d.x);a(this).scrollTop(f).scrollLeft(g)}).on("touchend mouseup",".content-scroll",function(a){a.preventDefault(),b=!1})},_autoClose:function(){var a=this;a.autoCloseTimer=setTimeout(function(){a.closeDialog()},a.settings.autoClose)},closeDialog:function(){var a=this;a.isHided=!0,a.settings.onBeforeClosed(),a.$dialog.addClass("dialog-close").removeClass("dialog-open"),a.tapBug&&a._appendTapOverlayer()},removeDialog:function(){var b=this;b.$dialog.remove(),b.isHided=!1,b.settings.onClosed(),b.settings=a.fn.dialog.defaults},update:function(b){var c=this;clearTimeout(c.autoCloseTimer),c.settings=a.extend({},a.fn.dialog.defaults,b),""!==c.settings.content&&c.$dialogContentBd.html(c.settings.content);var d=c.$dialogContentBd.find(".info-icon"),e=c.$dialogContentBd.find(".info-text");d.attr({src:c.settings.infoIcon}),e.html(c.settings.infoText),c._bindEvents()},_hasTapBug:function(){return f.isAndroid&&f.version<4.4},_appendTapOverlayer:function(){var b=this;b.$tapBugOverlayer=a(".solve-tap-bug"),b.$tapBugOverlayer.length||(b.$tapBugOverlayer=a('
'),a("body").append(b.$tapBugOverlayer))},_removeTapOverlayer:function(){var a=this;setTimeout(function(){a.$tapBugOverlayer.remove()},350)}},d}(),f=function(a){var b=a.navigator.userAgent,d=/android|adr/gi.test(b),e=/iphone|ipod|ipad/gi.test(b)&&!d,f=d||e,g=e?"ios":d?"android":"default",h="ontouchend"in c,i=e?/os [\d._]*/gi:/android [\d._]*/gi,j=b.match(i),k=(j+"").replace(/[^0-9|_.]/gi,"").replace(/_/gi,".");return{isIOS:e,isAndroid:d,isMobile:f,platform:g,version:parseFloat(k),isSupportTouch:h,tapEvent:f&&h?"tapEvent":"click"}}(b);a.fn.dialog=function(c){var d=this;return this.each(function(){var f=a(this),g=b.jQuery?f.data("dialog"):a.fn.dialog.lookup[f.data("dialog")];if(g){var h=new e(this,c);h._init()}else{var h=new e(this,c);h._init(),b.jQuery?f.data("dialog",h):(a.fn.dialog.lookup[++a.fn.dialog.lookup.i]=h,f.data("dialog",a.fn.dialog.lookup.i),g=a.fn.dialog.lookup[f.data("dialog")])}"string"==typeof c&&g[c](),d.close=function(){h.closeDialog()},d.update=function(a){h.update(a)}})},b.jQuery||(a.fn.dialog.lookup={i:0}),a.fn.dialog.defaults={type:"alert",style:"default",titleShow:!0,titleText:"提示",closeBtnShow:!1,content:"",contentScroll:!0,dialogClass:"",autoClose:0,overlayShow:!0,overlayClose:!1,buttonStyle:"side",buttonTextConfirm:"确定",buttonTextCancel:"取消",buttonClassConfirm:"",buttonClassCancel:"",buttons:[],infoIcon:"",infoText:"",position:"center",onClickConfirmBtn:function(){},onClickCancelBtn:function(){},onClickCloseBtn:function(){},onBeforeShow:function(){},onShow:function(){},onBeforeClosed:function(){},onClosed:function(){}}}(window.jQuery||window.Zepto,window,document),function(a,b,c,d){"use strict";a(c).ready(function(){var b,d,e,f,g,h;a(c).on("touchstart",function(c){var c=c.originalEvent||c,i=c.changedTouches[0];h=a("tagName"in i.target?i.target:i.target.parentNode),g=new Date,b=i.clientX,d=i.clientY,e=i.clientX,f=i.clientY}).on("touchmove",function(a){var a=a.originalEvent||a,b=a.changedTouches[0];e=b.clientX,f=b.clientY}).on("touchend",function(a){var a=a.originalEvent||a;a.changedTouches[0];new Date-g<300&&Math.abs(e-b)+Math.abs(f-d)<30&&h.trigger("tapEvent"),g=0,b=0,d=0,e=0,f=0})}),["tapEvent"].forEach(function(b){a.fn[b]=function(a){return this.on(b,a)}})}(window.jQuery||window.Zepto,window,document),function(a,b,c,d){"use strict";function e(a){try{return a.getBoundingClientRect()}catch(a){console.log("No support getBoundingClientRect",a.message)}}var f=function(){function b(b,c){var d=this;d.$element=a(b),d.settings=a.extend({},a.fn.ripple.defaults,c),d.target=null,d.positionX=0,d.positionY=0,d.init()}return b.prototype={init:function(){this.bindEvents()},bindEvents:function(){var b=this;b.$element.on(g.downEvent,function(c){var d=c.changedTouches?c.changedTouches[0]:c;b.target=a(d.target),b.positionX=d.pageX,b.positionY=d.pageY,b.creatRipple()}),a(c).on("webkitAnimationEnd MSAnimationEnd animationend","."+b.settings.className,function(){var a=this;b.removeRipple(a)})},creatRipple:function(){var b=this,c=e(b.target[0]),d=Math.max(c.width,c.height),f=b.target.offset().left,g=b.target.offset().top;b.$rippleElement=a("<"+b.settings.tagName+">"),b.$rippleElement.addClass(b.settings.className).css({left:b.positionX-f-d/2,top:b.positionY-g-d/2,width:d,height:d}),b.target.append(b.$rippleElement)},removeRipple:function(a){a.remove()}},b}(),g=function(a){var b=a.navigator.userAgent,d=/android|adr/gi.test(b),e=/iphone|ipod|ipad/gi.test(b)&&!d,f=d||e,g="ontouchend"in c;return{downEvent:f&&g?"touchstart":"mousedown"}}(b);a.fn.ripple=function(a){var b=[];return this.each(function(c,d){b.push(new f(d,a))}),b},a.fn.ripple.defaults={tagName:"span",className:"ripple"},a(function(){return new f(a("[data-ripple]"))})}(window.jQuery||window.Zepto,window,document); \ No newline at end of file +!function(a,b,c,d){"use strict";var e=function(){function d(b,c){this.$element=a(b),this.settings=a.extend({},a.fn.dialog.defaults,c)}return d.prototype={_init:function(){var b=this;if(console.log("初始化弹窗"),clearTimeout(b.autoCloseTimer),b.isHided=!1,b.tapBug=b._hasTapBug(),b.platform=f.platform,b.dislogStyle="default"===b.settings.style?b.platform:b.settings.style,0===a("#dialog-body-no-scroll").length){a("head").append('')}b._renderDOM(),b._bindEvents()},_renderDOM:function(){var a=this;a.settings.onBeforeShow(),a._createDialogDOM(a.settings.type),a.settings.onShow()},_bindEvents:function(){var d=this;d.$confirmBtn.on(f.tapEvent,function(a){var b=d.settings.onClickConfirmBtn();(b||void 0===b)&&d.closeDialog()}).on("touchend",function(a){a.preventDefault()}),d.$cancelBtn.on(f.tapEvent,function(a){var b=d.settings.onClickCancelBtn();(b||void 0===b)&&d.closeDialog()}).on("touchend",function(a){a.preventDefault()}),d.$closeBtn.on(f.tapEvent,function(a){var b=d.settings.onClickCloseBtn();(b||void 0===b)&&d.closeDialog()}).on("touchend",function(a){a.preventDefault()}),d.settings.overlayClose&&a(c).on(f.tapEvent,".dialog-overlay",function(a){d.closeDialog()}),d.settings.autoClose>0&&(console.log(d.settings.autoClose/1e3+"秒后, 自动关闭弹窗"),d._autoClose()),a(c).on("webkitAnimationEnd MSAnimationEnd animationend",".dialog-content",function(){d.isHided&&(d.removeDialog(),d.tapBug&&d._removeTapOverlayer())}),d.settings.buttons.length&&a.each(d.settings.buttons,function(a,b){d.$dialogContentFt.children("button").eq(a).on(f.tapEvent,function(a){a.preventDefault();var c=b.callback();(c||void 0===c)&&d.closeDialog()})}),a(b).on("onorientationchange"in b?"orientationchange":"resize",function(){d.settings.contentScroll&&setTimeout(function(){d._resetDialog()},200)}),a(c).on("touchmove",function(b){return!d.$dialog.find(a(b.target)).length}),d.settings.contentScroll&&d._contentScrollEvent(),"android"===d.dislogStyle&&a(".dialog-content-ft > .dialog-btn").ripple()},_createDialogDOM:function(b){var c=this;switch(c.$dialog=a('
'),c.$dialogOverlay=a('
'),c.$dialogContent=a('
'),c.$dialogTitle=a('

'+c.settings.titleText+"

"),c.$dialogContentFt=a('
'),c.$dialogContentBd=a('
'),c.$closeBtn=a('
close
'),c.$confirmBtn=a('"),c.$cancelBtn=a('"),b){case"alert":c.$dialog.addClass("dialog-modal"),c.settings.overlayShow&&c.$dialog.append(c.$dialogOverlay),c.settings.titleShow&&c.$dialogContent.append(c.$dialogTitle),c.settings.closeBtnShow&&c.$dialogTitle.append(c.$closeBtn),c.$dialogContentBd.html(c.settings.content),c.$dialogContentFt.append(c.$confirmBtn),c.$dialogContent.append(c.$dialogContentBd).append(c.$dialogContentFt),c.$dialog.append(c.$dialogContent),a("body").append(c.$dialog),c.settings.bodyNoScroll&&a("body").addClass("body-no-scroll"),c.settings.contentScroll&&c._setDialogContentHeight();break;case"confirm":if(c.$dialog.addClass("dialog-modal"),c.settings.overlayShow&&c.$dialog.append(c.$dialogOverlay),c.settings.titleShow&&c.$dialogContent.append(c.$dialogTitle),c.settings.closeBtnShow&&c.$dialogTitle.append(c.$closeBtn),c.settings.buttons.length){var d="";a.each(c.settings.buttons,function(a,b){d+='"}),c.$dialogContentFt.append(d).addClass(c.settings.buttonStyle)}else c.$dialogContentFt.append(c.$cancelBtn).append(c.$confirmBtn).addClass(c.settings.buttonStyle);c.$dialogContentBd.html(c.settings.content),c.$dialogContent.append(c.$dialogContentBd).append(c.$dialogContentFt),c.$dialog.append(c.$dialogContent),a("body").append(c.$dialog),c.settings.contentScroll&&c._setDialogContentHeight(),c.settings.bodyNoScroll&&a("body").addClass("body-no-scroll");break;case"toast":c.$dialog.addClass("dialog-toast"),c.settings.overlayShow&&c.$dialog.append(c.$dialogOverlay);var e=a(c.settings.content);""!==c.settings.infoIcon&&""!==c.settings.infoText?e=a(''+c.settings.infoText+""):""===c.settings.infoIcon&&""!==c.settings.infoText?e=a(''+c.settings.infoText+""):""!==c.settings.infoIcon&&""===c.settings.infoText&&(e=a('')),c.$dialogContentBd.append(e),c.$dialogContent.append(c.$dialogContentBd),c.$dialog.append(c.$dialogContent),a("body").append(c.$dialog),c.settings.bodyNoScroll&&a("body").addClass("body-no-scroll");break;case"notice":c.$dialog.addClass("dialog-notice"),"bottom"===c.settings.position&&c.$dialog.addClass("dialog-notice-bottom"),c.settings.overlayShow&&c.$dialog.append(c.$dialogOverlay);var f=a(c.settings.content);""!==c.settings.infoIcon&&""!==c.settings.infoText?f=a(''+c.settings.infoText+""):""===c.settings.infoIcon&&""!==c.settings.infoText?f=a(''+c.settings.infoText+""):""!==c.settings.infoIcon&&""===c.settings.infoText&&(f=a('')),c.$dialogContentBd.append(f),c.$dialogContent.append(c.$dialogContentBd),c.$dialog.append(c.$dialogContent),a("body").append(c.$dialog),c.settings.bodyNoScroll&&a("body").addClass("body-no-scroll");break;default:console.log("running default")}},_setDialogContentHeight:function(){var a=this;setTimeout(function(){var b=a.$dialogContentBd.height(),c=a._getDialogContentMaxHeight();a.$dialogContentBd.css({"max-height":c}).addClass("content-scroll"),b>c?a.$dialogContentFt.addClass("dialog-content-ft-border"):a.$dialogContentFt.removeClass("dialog-content-ft-border")},80)},_getDialogContentMaxHeight:function(){var c=this,d=a(b).height(),e=c.$dialogTitle.height(),f=c.$dialogContentFt.height(),g=d-e-f-60;return g=g%2==0?g:g-1},_resetDialog:function(){this._setDialogContentHeight()},_contentScrollEvent:function(){var b=!1,d={x:0,y:0,top:0,left:0};a(c).on("touchstart mousedown",".content-scroll",function(c){var e=c.changedTouches?c.changedTouches[0]:c;return b=!0,d.x=e.clientX,d.y=e.clientY,d.top=a(this).scrollTop(),d.left=a(this).scrollLeft(),!1}).on("touchmove mousemove",".content-scroll",function(c){var e=c.changedTouches?c.changedTouches[0]:c;if(!b)return!1;var f=d.top-(e.clientY-d.y),g=d.left-(e.clientX-d.x);a(this).scrollTop(f).scrollLeft(g)}).on("touchend mouseup",".content-scroll",function(a){a.preventDefault(),b=!1})},_autoClose:function(){var a=this;a.autoCloseTimer=setTimeout(function(){a.closeDialog()},a.settings.autoClose)},closeDialog:function(){var a=this;a.isHided=!0,a.settings.onBeforeClosed(),a.$dialog.addClass("dialog-close").removeClass("dialog-open"),a.tapBug&&a._appendTapOverlayer()},removeDialog:function(){var b=this;b.$dialog.remove(),b.isHided=!1,b.settings.onClosed(),b.settings=a.fn.dialog.defaults,b.settings.bodyNoScroll&&a("body").removeClass("body-no-scroll")},update:function(b){var c=this;clearTimeout(c.autoCloseTimer),c.settings=a.extend({},a.fn.dialog.defaults,b),""!==c.settings.content&&c.$dialogContentBd.html(c.settings.content);var d=c.$dialogContentBd.find(".info-icon"),e=c.$dialogContentBd.find(".info-text");d.attr({src:c.settings.infoIcon}),e.html(c.settings.infoText),c._bindEvents()},_hasTapBug:function(){return f.isAndroid&&f.version<4.4},_appendTapOverlayer:function(){var b=this;b.$tapBugOverlayer=a(".solve-tap-bug"),b.$tapBugOverlayer.length||(b.$tapBugOverlayer=a('
'),a("body").append(b.$tapBugOverlayer))},_removeTapOverlayer:function(){var a=this;setTimeout(function(){a.$tapBugOverlayer.remove()},350)}},d}(),f=function(a){var b=a.navigator.userAgent,d=/android|adr/gi.test(b),e=/iphone|ipod|ipad/gi.test(b)&&!d,f=d||e,g=e?"ios":d?"android":"default",h="ontouchend"in c,i=e?/os [\d._]*/gi:/android [\d._]*/gi,j=b.match(i),k=(j+"").replace(/[^0-9|_.]/gi,"").replace(/_/gi,".");return{isIOS:e,isAndroid:d,isMobile:f,platform:g,version:parseFloat(k),isSupportTouch:h,tapEvent:f&&h?"tapEvent":"click"}}(b);a.fn.dialog=function(c){var d=this;return this.each(function(){var f=a(this),g=b.jQuery?f.data("dialog"):a.fn.dialog.lookup[f.data("dialog")];if(g){var h=new e(this,c);h._init()}else{var h=new e(this,c);h._init(),b.jQuery?f.data("dialog",h):(a.fn.dialog.lookup[++a.fn.dialog.lookup.i]=h,f.data("dialog",a.fn.dialog.lookup.i),g=a.fn.dialog.lookup[f.data("dialog")])}"string"==typeof c&&g[c](),d.close=function(){h.closeDialog()},d.update=function(a){h.update(a)}})},b.jQuery||(a.fn.dialog.lookup={i:0}),a.fn.dialog.defaults={type:"alert",style:"default",titleShow:!0,titleText:"提示",bodyNoScroll:!1,closeBtnShow:!1,content:"",contentScroll:!0,dialogClass:"",autoClose:0,overlayShow:!0,overlayClose:!1,buttonStyle:"side",buttonTextConfirm:"确定",buttonTextCancel:"取消",buttonClassConfirm:"",buttonClassCancel:"",buttons:[],infoIcon:"",infoText:"",position:"center",onClickConfirmBtn:function(){},onClickCancelBtn:function(){},onClickCloseBtn:function(){},onBeforeShow:function(){},onShow:function(){},onBeforeClosed:function(){},onClosed:function(){}}}(window.jQuery||window.Zepto,window,document),function(a,b,c,d){"use strict";a(c).ready(function(){var b,d,e,f,g,h;a(c).on("touchstart",function(c){var c=c.originalEvent||c,i=c.changedTouches[0];h=a("tagName"in i.target?i.target:i.target.parentNode),g=new Date,b=i.clientX,d=i.clientY,e=i.clientX,f=i.clientY}).on("touchmove",function(a){var a=a.originalEvent||a,b=a.changedTouches[0];e=b.clientX,f=b.clientY}).on("touchend",function(a){var a=a.originalEvent||a;a.changedTouches[0];new Date-g<300&&Math.abs(e-b)+Math.abs(f-d)<30&&h.trigger("tapEvent"),g=0,b=0,d=0,e=0,f=0})}),["tapEvent"].forEach(function(b){a.fn[b]=function(a){return this.on(b,a)}})}(window.jQuery||window.Zepto,window,document),function(a,b,c,d){"use strict";function e(a){try{return a.getBoundingClientRect()}catch(a){console.log("No support getBoundingClientRect",a.message)}}var f=function(){function b(b,c){var d=this;d.$element=a(b),d.settings=a.extend({},a.fn.ripple.defaults,c),d.target=null,d.positionX=0,d.positionY=0,d.init()}return b.prototype={init:function(){this.bindEvents()},bindEvents:function(){var b=this;b.$element.on(g.downEvent,function(c){var d=c.changedTouches?c.changedTouches[0]:c;b.target=a(d.target),b.positionX=d.pageX,b.positionY=d.pageY,b.creatRipple()}),a(c).on("webkitAnimationEnd MSAnimationEnd animationend","."+b.settings.className,function(){var a=this;b.removeRipple(a)})},creatRipple:function(){var b=this,c=e(b.target[0]),d=Math.max(c.width,c.height),f=b.target.offset().left,g=b.target.offset().top;b.$rippleElement=a("<"+b.settings.tagName+">"),b.$rippleElement.addClass(b.settings.className).css({left:b.positionX-f-d/2,top:b.positionY-g-d/2,width:d,height:d}),b.target.append(b.$rippleElement)},removeRipple:function(a){a.remove()}},b}(),g=function(a){var b=a.navigator.userAgent,d=/android|adr/gi.test(b),e=/iphone|ipod|ipad/gi.test(b)&&!d,f=d||e,g="ontouchend"in c;return{downEvent:f&&g?"touchstart":"mousedown"}}(b);a.fn.ripple=function(a){var b=[];return this.each(function(c,d){b.push(new f(d,a))}),b},a.fn.ripple.defaults={tagName:"span",className:"ripple"},a(function(){return new f(a("[data-ripple]"))})}(window.jQuery||window.Zepto,window,document); \ No newline at end of file diff --git a/dist/js/example.js b/dist/js/example.js index 132389c..e7a7e51 100644 --- a/dist/js/example.js +++ b/dist/js/example.js @@ -3,7 +3,6 @@ $(function() { /* ########## alert ########## */ $(document).on('click', '#btn-01', function() { var dialog1 = $(document).dialog({ - // content: '' content: '我是默认的弹窗。这里是提示信息内容' // content: '我是默认的弹窗。这里是提示信息内容。我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。', // content: '我是默认的弹窗。这里是提示信息内容。我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容', diff --git a/package.json b/package.json index e2174dc..44cc9e7 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "dialog", "description": "兼容jQuery与Zepto的移动端弹窗插件。", - "version": "2.0.0", + "version": "2.1.0", "homepage": "https://github.com/sufangyu/dialog2", "author": { "name": "方雨_Yu", diff --git a/src/css/dialog.css b/src/css/dialog.css index c07c916..7ba24df 100644 --- a/src/css/dialog.css +++ b/src/css/dialog.css @@ -124,7 +124,6 @@ } .dialog-content-ft { - display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; @@ -148,7 +147,6 @@ transform: scaleY(0.5); } .dialog-content-ft .dialog-btn { - -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; diff --git a/src/css/tmpl.css b/src/css/tmpl.css index 41829fd..7e2b9c5 100644 --- a/src/css/tmpl.css +++ b/src/css/tmpl.css @@ -27,9 +27,8 @@ button { } a { - -webkit-transition: -webkit-transform 1s; - transition: transform 1s; - display: -webkit-box; + transition: -webkit-transform 1s; + transition: transform 1s; display: -webkit-flex; display: -ms-flexbox; display: flex; @@ -239,7 +238,6 @@ body { .history-version li { padding: 5px 0 5px 15px; position: relative; - display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; @@ -263,7 +261,6 @@ body { margin-right: 10px; } .history-version .time { - -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; diff --git a/src/js/dialog.js b/src/js/dialog.js index d9c5b83..6fd4ab2 100644 --- a/src/js/dialog.js +++ b/src/js/dialog.js @@ -1,7 +1,7 @@ /** - * dialog v2.0.0 - * @date 2016-10-12 - * @author 方雨_Yu + * dialog v2.1.0 + * @date 2018-04-12 + * @author 方雨_Yu * @home https://github.com/sufangyu/dialog2 * @bugs https://github.com/sufangyu/dialog2/issues * Licensed under MIT @@ -31,6 +31,8 @@ */ _init: function() { var self = this; + + console.log('初始化弹窗'); clearTimeout(self.autoCloseTimer); @@ -39,6 +41,13 @@ self.platform = mobileUtil.platform; // 访问设备平台 self.dislogStyle = self.settings.style==='default' ? self.platform : self.settings.style; // 弹窗风格, 默认自动判断平台; 否则, 为指定平台 + + // 创建弹窗显示时, 禁止 body 内容滚动的样式并且添加到 head + if ($('#dialog-body-no-scroll').length === 0) { + var styleContent = '.body-no-scroll { position: absolute; overflow: hidden; width: 100%; }'; + $('head').append(''); + } + self._renderDOM(); self._bindEvents(); }, @@ -62,24 +71,30 @@ // 确定按钮关闭弹窗 self.$confirmBtn.on(mobileUtil.tapEvent, function(ev) { - self.closeDialog(); - self.settings.onClickConfirmBtn(); + var callback = self.settings.onClickConfirmBtn(); + if (callback || callback === undefined) { + self.closeDialog(); + } }).on('touchend', function(ev) { ev.preventDefault(); }); // 取消按钮关闭弹窗 self.$cancelBtn.on(mobileUtil.tapEvent, function(ev) { - self.closeDialog(); - self.settings.onClickCancelBtn(); + var callback = self.settings.onClickCancelBtn(); + if (callback || callback === undefined) { + self.closeDialog(); + } }).on('touchend', function(ev) { ev.preventDefault(); }); // 关闭按钮关闭弹窗 self.$closeBtn.on(mobileUtil.tapEvent, function(ev) { - self.closeDialog(); - self.settings.onClickCloseBtn(); + var callback = self.settings.onClickCloseBtn(); + if (callback || callback === undefined) { + self.closeDialog(); + } }).on('touchend', function(ev) { ev.preventDefault(); }); @@ -112,9 +127,11 @@ if (self.settings.buttons.length) { $.each(self.settings.buttons, function(index, item) { self.$dialogContentFt.children('button').eq(index).on(mobileUtil.tapEvent, function(ev) { - self.closeDialog(); - item.callback(); ev.preventDefault(); + var callback = item.callback(); + if (callback || callback === undefined) { + self.closeDialog(); + } }); }); } @@ -192,6 +209,10 @@ self.$dialog.append(self.$dialogContent); $('body').append(self.$dialog); + if (self.settings.bodyNoScroll) { + $('body').addClass('body-no-scroll'); + } + // 设置弹窗提示内容最大高度 if (self.settings.contentScroll) { self._setDialogContentHeight(); @@ -235,7 +256,11 @@ // 设置弹窗提示内容最大高度 if (self.settings.contentScroll) { self._setDialogContentHeight(); - } + } + + if (self.settings.bodyNoScroll) { + $('body').addClass('body-no-scroll'); + } break; case 'toast': @@ -263,6 +288,10 @@ self.$dialog.append(self.$dialogContent); $('body').append(self.$dialog); + if (self.settings.bodyNoScroll) { + $('body').addClass('body-no-scroll'); + } + break; case 'notice': // 添加 toast 类型弹窗标识 @@ -294,6 +323,10 @@ self.$dialog.append(self.$dialogContent); $('body').append(self.$dialog); + if (self.settings.bodyNoScroll) { + $('body').addClass('body-no-scroll'); + } + break; default: console.log('running default'); @@ -436,6 +469,10 @@ self.settings.onClosed(); // 重新初始化默认配置 self.settings = $.fn.dialog.defaults; + + if (self.settings.bodyNoScroll) { + $('body').removeClass('body-no-scroll'); + } }, /** @@ -593,6 +630,7 @@ style : 'default', // alert 与 confirm 弹窗的风格 [ default: 根据访问设备平台; ios: ios 风格; android: MD design 风格 ] titleShow : true, // 是否显示标题 titleText : '提示', // 标题文字 + bodyNoScroll : false, // body内容不可以滚动 closeBtnShow : false, // 是否显示关闭按钮 content : '', // 弹窗提示内容, 值可以是 HTML 内容 contentScroll: true, // alert 与 confirm 弹窗提示内容是否限制最大高度, 使其可以滚动 diff --git a/src/scss/dialog.scss b/src/scss/dialog.scss index 4ec6a90..f909cd5 100644 --- a/src/scss/dialog.scss +++ b/src/scss/dialog.scss @@ -36,7 +36,7 @@ $mdBtnFontColor: #00bbd3; z-index: 10002; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(0, 0, 0, 0.5); } .dialog-content { position: absolute;