卖家中心弹框做成灯箱效果

src/main/webapp/resources/js/vendor/controllers/forstore/vendor_index_ctrl.js

@@ -4,7 +4,7 @@
  */
 define(['app/app', 'calendar'], function(app) {
     'use strict';
-    app.register.controller('vendorIndexCtrl', ['$scope', 'toaster', 'VendorService', '$rootScope', 'News', '$filter', 'DistributionRule', '$q', function($scope, toaster, VendorService, $rootScope, News, $filter, DistributionRule, $q) {
+    app.register.controller('vendorIndexCtrl', ['$scope', 'toaster', 'VendorService', '$rootScope', 'News', '$filter', 'DistributionRule', '$q', '$modal', function($scope, toaster, VendorService, $rootScope, News, $filter, DistributionRule, $q, $modal) {
         document.title = '卖家中心-优软商城';
         $rootScope.active = 'index';
         VendorService.getVendorInfo(null, function(data){
@@ -51,16 +51,47 @@ define(['app/app', 'calendar'], function(app) {
         $q.all([initRuleCount().$promise]).then(function (data) {
             if (data){
                 if ($scope.needShowTip){
-                    $scope.showNoRuleTip = true;
-                }else {
-                    $scope.showNoRuleTip = false;
+                    $modal.open({
+                        animation: true,
+                        templateUrl: 'static/view/common/modal/delivery_rule_modal.html',
+                        controller: 'delete_ctrl'
+                    });
                 }
             }
         });
 
+    }]);
+
+    app.register.controller('delete_ctrl', ['$scope', 'toaster', '$modalInstance', function ($scope, toaster, $modalInstance) {
+        $scope.tipModal = true;
+
         $scope.cancelDelete = function () {
-            $scope.showNoRuleTip = false;
-        }
-        
+            $scope.tipModal = false;
+            $modalInstance.dismiss();
+        };
+
+        /**
+         * 监听点击的事件
+         */
+        document.onclick = function (event) {
+            if($scope.tipModal) {
+                if(event) {
+                    var tag = event.target;
+                    if(tag) {
+                        var attribute = tag.getAttribute("name");
+                        while(tag.nodeName != 'BODY') {
+                            if(attribute == 'rule_model' ||
+                                attribute == 'rule_cancel' || attribute == 'rule_href') {
+                                return ;
+                            }
+                            tag = tag.parentElement;
+                            attribute = tag.getAttribute("name");
+                        }
+                        $scope.tipModal = false;
+                        $modalInstance.dismiss();
+                    }
+                }
+            }
+        };
     }]);
 });

src/main/webapp/resources/view/common/modal/delivery_rule_modal.html

@@ -76,12 +76,12 @@
         box-shadow: none!important ;
     }
 </style>
-<div class="com-del-box">
+<div class="com-del-box" name="rule_model">
     <div class="title">
-        <a ng-click="cancleDelete()"><i class="fa fa-close fa-lg"></i></a>
+        <a name="rule_cancel" ng-click="cancelDelete()"><i class="fa fa-close fa-lg"></i></a>
     </div>
     <div class="content">
-        <p><i class="fa fa-exclamation-circle"></i>是否删除此信息</p>
-        <div><a ng-click="cancleDelete()">取消</a><a ng-click="confirmDelete()">确认</a></div>
+        <p><i class="fa fa-exclamation-circle"></i><span>您的店铺尚未设置配送规则，无法计算运费，建议尽快设置！</span></p>
+        <div><a name="rule_cancel" ng-click="cancelDelete()">以后再说</a><a name="rule_href" href="vendor#vendor_deliveryRule">立即设置</a></div>
     </div>
 </div>