AngularJS Bootstrap modal freezes on full calendar event onclick

Question

I have a very strange error. Whenever I click an event on my full calendar, a modal is supposed to appear except, it freezes the entire page before opening up.

frozen modal

in the link above, the thin grey line at the top is the modal.

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

I tried the following solution but it did not seem to make a difference in my case. Can anyone suggest a fix/faced a similar issue before?

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>

score 0 · Accepted Answer · answered Nov 11 '17 at 12:28

Maybe you should try to increase z-index property of modal? Try

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

And then from resolve:

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

Dirty solution, but may be a solution in your case. Timeout is added to allow everything to render (#my-modal) has to be initialized and visible.

AngularJS Bootstrap modal freezes on full calendar event onclick

1 Answers1