Modal
- Modal 是从App的主要内容区域上弹出的一小块内容块. Modals经常被用来向用户询问信息,或通知或警告用户。 Modal和其他所有的遮罩图层一样,是所谓的“临时视图”的一部分。
+ Modal 是从App的主要内容区域上弹出的一小块内容块,是“临时视图”的一部分。
+ 多个Modal类组件(包括toast)同时被呼起时,会按先后顺序被缓存在队列中,前一个modal关闭后,下一个modal才会打开
Modals 可以只用JavaScript打开。所以让我们来看看使用modals的相关APP方法
预定义的 Modals
diff --git a/js/modal.js b/js/modal.js
index 8e68ec43..fee543d0 100644
--- a/js/modal.js
+++ b/js/modal.js
@@ -270,17 +270,18 @@
//显示一个消息,会在2秒钟后自动消失
$.toast = function(msg, duration, extraclass) {
var $toast = $('').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,6 +329,10 @@
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) {
@@ -335,20 +340,19 @@
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: '加载中',