0

I'm calling the bootstrap modal using the below code,

$scope.modalInstance = $modal.open({
                templateUrl: '/src/lvassets/owl/download/points.modal.php',
                size: 'm',
                controller: DownloadInstanceCtrl,
                windowClass: "hmodal-info",
                scope: $scope,
                backdrop: 'static',
                keyboard: false,
                resolve: {
                    params: function () {
                        var vars = {
                            'qty': $scope.qty,
                            'code': $scope.shortCode,
                            'offset': $scope.offset,
                            'status': $scope.status
                        };
                        return vars;
                    }
                }
            });

As you can see I have set the 'backdrop' property to 'static' and 'keyboard' to 'false' to prevent the modal to be closed with the mouse or the 'esc' key from the keyboard. This modal shows progress bar along with some details about the download process and depending upon the user input it could take few minuted for the download process to close. So I have added a button where the user is given an option to 'Download in background', that will close the modal. I have used below code for that,

$(".inmodal").hide();
$('body').removeClass('modal-open');
$('.modal-backdrop').hide();

Once the process completes in the background I'm reopening the modal screen which contains some follow-up details by this code,

$(".inmodal").show();
$('body').addClass('modal-open');
$('.modal-backdrop').show();

The above code hides the modal and removes the 'tinted' screen and the user so the user can view the screen, sroll through it and read the details BUT the user cannot interact with the screen i.e. the he/she cannot click on the links or buttons.

Is there a way to address this problem? Thanks in advance.

Saumil
  • 2,521
  • 5
  • 32
  • 54
  • 1
    Why are you not using the standard method of closing the modal (`$('.inmodal').modal('hide')`? – isherwood Nov 09 '16 at 19:37
  • @isherwood I forgot to mention that but its because once the download process completes I want to repopen the same modal where the user can select the type of records they want to download and click on 'Download Now' button to download it – Saumil Nov 09 '16 at 19:39
  • 1
    I take that back. You're using Angular. You shouldn't be writing jQuery at all. http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background – isherwood Nov 09 '16 at 19:40

1 Answers1

0

Assuming you should be using jQuery for your website, when a bootstrap modal initially opens, it applies a .modal-open class to the <body> tag which disables interaction with anything but the modal (see docs). You're simply hiding the modal using jQuery's standarad hide function. You need to use $('.inmodal').modal('hide'); so the modal and all other features of the modal display go back to their originally state.

Justin L.
  • 993
  • 14
  • 33
  • It sure hid the modal but the I'm still unable to click on any links or buttons when the modal is hidden – Saumil Nov 09 '16 at 19:53