AngularJS Bootstrap模式在完整日曆事件onclick上凍結

Question

我有一個非常奇怪的錯誤。每當我點擊我的完整日曆上的事件時，應該會顯示一個模式，除非它在打開之前凍結整個頁面。

frozen modal

在上面的鏈接

，在頂部的細灰線是模態。

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> 

Answer 1

也許你應該嘗試增加的模態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）必須初始化並可見。