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) 必须被初始化并且可见。