多个Modal类组件（包括toast）同时被呼起时，会按先后顺序被缓存在队列中，前一个modal关闭后，下一个modal才会打开. fix #…

…106
sdc-alibaba · Nov 24, 2015 · ba0d716 · ba0d716
1 parent 87068a9
commit ba0d716
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/docs/_includes/_components/modal.html b/docs/_includes/_components/modal.html
@@ -1,6 +1,7 @@
 <article class="component" id="modal">
   <h2 class="component-title">Modal</h2>
-  <p class="component-description">Modal 是从App的主要内容区域上弹出的一小块内容块. Modals经常被用来向用户询问信息，或通知或警告用户。 Modal和其他所有的遮罩图层一样，是所谓的“临时视图”的一部分。</p>
+  <p class="component-description">Modal 是从App的主要内容区域上弹出的一小块内容块,是“临时视图”的一部分。</p>
+  <p class="component-description">多个Modal类组件（包括toast）同时被呼起时，会按先后顺序被缓存在队列中，前一个modal关闭后，下一个modal才会打开</p>
   <p class="component-description">Modals 可以只用JavaScript打开。所以让我们来看看使用modals的相关APP方法</p>
 
   <h3 class="component-title">预定义的 Modals</h3>

diff --git a/js/modal.js b/js/modal.js
@@ -270,17 +270,18 @@
     //显示一个消息，会在2秒钟后自动消失
     $.toast = function(msg, duration, extraclass) {
       var $toast = $('<div class="modal toast ' + (extraclass || '') + '">' + msg + '</div>').appendTo(document.body);
-      $.openModal($toast);
-      setTimeout(function() {
-        $.closeModal($toast);
-      }, duration || 2000);
+      $.openModal($toast, function(){
+        setTimeout(function() {
+          $.closeModal($toast);
+        }, duration || 2000);     
+      });
     };
-    $.openModal = function (modal) {
+    $.openModal = function (modal, cb) {
         modal = $(modal);
         var isModal = modal.hasClass('modal');
         if ($('.modal.modal-in:not(.modal-out)').length && defaults.modalStack && isModal) {
             $.modalStack.push(function () {
-                $.openModal(modal);
+                $.openModal(modal, cb);
             });
             return;
         }
@@ -328,27 +329,30 @@
             if (modal.hasClass('modal-out')) modal.trigger('closed');
             else modal.trigger('opened');
         });
+        // excute callback
+        if (typeof cb == 'function') {
+          cb.call(this)
+        }
         return true;
     };
     $.closeModal = function (modal) {
         modal = $(modal || '.modal-in');
         if (typeof modal !== 'undefined' && modal.length === 0) {
             return;
         }
-        var isModal = modal.hasClass('modal');
-        var isPopup = modal.hasClass('popup');
-        var isLoginScreen = modal.hasClass('login-screen');
-        var isPickerModal = modal.hasClass('picker-modal');
-
-        var removeOnClose = modal.hasClass('remove-on-close');
-
-        var overlay = isPopup ? $('.popup-overlay') : $('.modal-overlay');
+        var isModal = modal.hasClass('modal'),
+            isPopup = modal.hasClass('popup'),
+            isToast = modal.hasClass('toast'),
+            isLoginScreen = modal.hasClass('login-screen'),
+            isPickerModal = modal.hasClass('picker-modal'),
+            removeOnClose = modal.hasClass('remove-on-close'),
+            overlay = isPopup ? $('.popup-overlay') : $('.modal-overlay');
         if (isPopup){
             if (modal.length === $('.popup.modal-in').length) {
                 overlay.removeClass('modal-overlay-visible');
             }
         }
-        else if (!isPickerModal) {
+        else if (!(isPickerModal || isToast)) {
             overlay.removeClass('modal-overlay-visible');
         }
 
@@ -428,6 +432,7 @@
     }
     $(document).on('click', ' .modal-overlay, .popup-overlay, .close-popup, .open-popup, .close-picker', handleClicks);
     var defaults =  $.modal.prototype.defaults  = {
+        modalStack: true,
         modalButtonOk: '确定',
         modalButtonCancel: '取消',
         modalPreloaderTitle: '加载中',