增加弹窗支持按钮点击后不关闭

增加弹窗显示后，body 内容不可以再滚动配置项
sufangyu · Apr 12, 2018 · d17a9a5 · d17a9a5
1 parent 7651e71
commit d17a9a5
Show file tree

Hide file tree

Showing 12 changed files with 131 additions and 40 deletions.
diff --git a/.gitignore b/.gitignore
@@ -47,3 +47,4 @@ Temporary Items
 .apdisk
 
 node_modules/
+.idea/
diff --git a/Changelog.md b/Changelog.md
@@ -0,0 +1,3 @@
+### 2.1.0 (2018-04-12)
++ 增加 弹窗支持按钮点击后不关闭；
++ 增加 弹窗显示后，body 内容不可以再滚动配置项；
diff --git a/README.md b/README.md
@@ -83,6 +83,11 @@ $(document).on('click', '#btn-01', function() {
             <td>'提示'</td>
             <td>标题文字</td>
         </tr>
+        <tr>
+            <td>bodyNoScroll</td>
+            <td>false</td>
+            <td>body 内容不可以滚动</td>
+        </tr>
         <tr>
             <td>closeBtnShow</td>
             <td>false</td>
@@ -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)
diff --git 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
@@ -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('<style id="dialog-body-no-scroll">'+ styleContent +'</style>');
+                }
+
                 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
diff --git 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: '<input type="text" />'
 			content: '我是默认的弹窗。这里是提示信息内容'
 			// content: '我是默认的弹窗。这里是提示信息内容。我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。',
 			// content: '我是默认的弹窗。这里是提示信息内容。我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容我是默认的弹窗。这里是提示信息内容',

diff --git 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
@@ -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
@@ -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;