AngularJS 부트 스트랩 모달이 전체 캘린더 이벤트 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 속성을 증가시키기 위해 노력해야한다? resolve에서 다음

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

시도 :

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

더러운 솔루션을하지만 경우에 해결책이 될 수 있습니다. 모든 것이 렌더링되도록하려면 시간 초과가 추가되어야합니다 (#my-modal). 초기화되어 표시되어야합니다.