Auto close a Modal Popup instead of using a button/on-click

Question

I currently have a page that is refreshing and I want to place a modal popup on the screen that gives the user a message such as "Please wait...". The reload is being performed with a $state.reload().

                                GenericModalService.confirmationSplit($rootScope, modal);
                                $state.reload();

    function confirmationSplit(scope, modal) {
        scope.modal = modal;
            scope.modalInstance = $uibModal.open({
                templateUrl: 'Scripts/app/Modals/ConfirmationSplit.html',
                scope: scope,
                size: 'md',
                backdrop: modal.backdrop != null ? modal.backdrop : true,

            })
    }  

Is there a way that I can close the modal once the $state.reload(); finishes? If not, is there a way that I can set an auto-timer for about 2-3 seconds and then have the modal close without the need to close/dismiss the modal using a button?

Answer 1

Bootstrap uses a jquery plugin to manually manage modals, I think in your case there are 3 useful methods:

// NOTE: I'm assuming the modal's id is #message

//show a modal:
$('#message').modal('show');

// close a modal:
$('#message').modal('hide');

//capture 'modal shown' event:
$('#message').on('shown.bs.modal', function (e) {
  // do something...
})

You can use the above pieces of code to manually show the modal and to hide it after the reload event ended.

if you can't catch the reload ended event you can easily set up an interval once the modal has been shown and close it after a set amount of time like this:

$('#message').on('shown.bs.modal', function (e) {
  console.log('modal has been shown');

  setTimeout(function () {
    console.log('closing modal...');
    $('#message').modal('hide');
  }, 3000)
})

related bootstrap doc: https://getbootstrap.com/docs/4.0/components/modal/#via-javascript