AngularJS Bootstrap模式在完整日历事件onclick上冻结

问题描述：

我有一个非常奇怪的错误。每当我点击我的完整日历上的事件时，应该会显示一个模式，除非它在打开之前冻结整个页面。AngularJS Bootstrap模式在完整日历事件onclick上冻结

在上面的链接

，在顶部的细灰线是模态。

Bootstrap Modal popping up but has a "tinted" page and can't interact

我尝试以下解决方案，但它似乎并没有把我的情况不同。任何人都可以提出修正/遇到过类似的问题吗？

directive.js

myApp.directive('msResourceCalendarDirective', function ($window, $timeout, $http) { 
    return { 
     restrict: 'AE', 
     templateUrl: '/client/resourceCalendarDirective/view.html?v=1', 
     controller: function($scope, $element, $attrs, $uibModal) { 

      var date = new Date(); 
      var d = date.getDate(); 
      var m = date.getMonth(); 
      var y = date.getFullYear(); 


      // Open modal from modal 
      $scope.alertOnEventClick = function (eventObj) { 
       console.log('Opening modal...'); 
       var modalInstance = $uibModal.open({ 
        animation: true, 
        templateUrl: '/client/resourceCalendarDirective/modal.html', 
        backdrop: false, 
        keyboard: true, 
        resolve: { 
         event: function() { 
          return eventObj; 
         } 
        } 
       }); 

       // Scope apply here to make modal show up 
       $scope.$evalAsync(function() { 
        modalInstance.result.then(
         function (event) { 
          console.log('Modal closed at: ' + new Date()); 
          console.log(event); 
          //$scope.events.push(event); 
         }, 
         function() { 
          console.log('Modal dismissed at: ' + new Date()); 
         } 
        ); 
       }); 

      }; 


      // empty array of events 
      $scope.events = []; 

      $scope.myevents = function(start, end, timezone, callback) { 
       $http.get('/api/v1/sample').then(function(response) { 

        //var events = []; 
        angular.forEach(response.data, function(event,key){ 
         $scope.events.push({ 
          id: event._id, 
          title: event.title, 
          start: event.startDateTime, 
          end: event.endDateTime 
         }); 
        }); 
        callback($scope.events); 
       }); 
      }; 



      /* config calendar object */ 
      $scope.uiConfig = { 
       calendar: { 
        height: 650, 
        editable: true, 
        header: { 
         left: 'month basicWeek basicDay', 
         center: 'title', 
         right: 'today prev, next' 
        }, 
        eventClick: $scope.alertOnEventClick 
        // eventDrop: $scope.alertOnDrop, 
        // eventResize: $scope.alertOnSize 
       } 
      }; 

      // linking event array to calendar to be displayed 
      $scope.eventSources = [$scope.myevents]; 

     } 
    } 
});

modal.html

<!-- Update Modal --> 
<div class="modal" id="calendarModal.html" > 
    <div class="modal-dialog"> 
     <div class="modal-content" > 
      <div class="modal-header"> 
       <h3>Edit Resource</h3> 
      </div> 
      <div class="modal-body"> 
       <div class="form-group row"> 
        <div class="col-xs-6"> 
         <label for="resourceTitle">Title</label> 
         <input id="resourceTitle" class="form-control" type="text" name="title" ng-model="sample.title"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <ms-date-time-picker ng-model="sample.startDateTime" placeholder="From" id="dateFrom"></ms-date-time-picker> 
       </div> 
       <div class="form-group"> 
        <ms-date-time-picker ng-model="sample.endDateTime" placeholder="To" id="dateTo"></ms-date-time-picker> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button class="btn btn-primary" ng-click="updateResource()" >Update Resource</button> 
       <button class="btn btn-danger" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div>

答

也许你应该尝试增加的模态z-index财产？尝试

<div class="modal-dialog" id="my-modal">

然后从resolve：

event: function() { 
    return eventObj; 
} 
showModal:() { 
    setTimeout(function() { 
     $('#my-modal').parent().css('z-index', '10000') 
    }, 5000); 
}

肮脏的解决方案，但可能是你的情况的解决方案。添加超时以允许呈现的所有内容（#my-modal）必须初始化并可见。

AngularJS Bootstrap模式在完整日历事件onclick上冻结

相关推荐