How to close spModal when switching from one modal to another?

[g_eggidio]

Hi guys,
I need to close an open spmodal when I switch to a new modal opened by the latter.

What is the best way to do it?

I opened a modal via spmodal.open() in the client-side controller.

Thanks, Giovanni

[ChrisBurks]

Hi Giovanni,

The "best way" depends on how you scripted it. 🙂

Here's one way based on constructing and opening and closing a $uibModal instance with functions:

// function to open first modal

$scope.onModal1 = function(){

     // assign first modal instance to a variable
     $scope.modal1 = $uibModal.open({
          templateUrl: 'modalone.html',
          scope: $scope
     })
}

// function to close first modal
$scope.closeIt1 = function(){

      // the string that is passed in the closed method is not necessary but can be useful if you're watching the state
     $scope.modal1.close("CloseIt 1");
}

// function to open second modal
$scope.onModal2 = function(){
     $scope.closeIt1(); // close first modal

     // assign second modal instance to a variable
     $scope.modal2 = $uibModal.open({
        templateUrl: 'modaltwo.html',
        scope: $scope
     })
}

// function to close second modal
$scope.closeIt2 = function(){

      // the string that is passed in the closed method is not necessary but can be useful if you're watching the state
     $scope.modal2.close("CloseIt 2");
}

Assigning the modal instances to a variable makes it easier to track them. You can actually log out the variable and see that it is type object. It contains the state of the close,closed, opened, dismiss, rendered and result values. The result value will even tell you how the modal was closed such as if the close method was used or if the modal was closed by clicking the backdrop (outside the modal);

I hope that helps.

Thanks,

Chris Burks

NewRocket:   http://www.newrocket.com

ServicePortal.io: http://www.serviceportal.io

[ChrisBurks]

Hi Giovanni,

In my previous post I used $uibModal because it's more flexible It's less restrictive than spModal and in my opinion easier to use if doing something complex with modal popups. 

spModal is actually a lightweight wrapper for $uibModal and was designed as an alternative for making alerts, prompts, and confirmation dialogs. Of course it does come with .open() method to embed a widget but that can be done with $uibModal too. 

Anyway, if spModal is definitely what you want to use I think this maybe the best way to close the latter modal:

In the spModal.open() that is opening the very last modal instance use $scope.$parent.$parent.$dismiss()

For example:

Modal one:

// This modal will open with an embedded widget that can open another spModal instance

$scope.onModal1 = function(){
    $scope.open1 = spModal.open({
        title: 'Modal one',
        widget: 'modalembed',       

        buttons: [{label: "Cancel", cancel:true}]
     })
}

Modal two:

// This modal is contained in the  widget "modalembed" that contains a button that will open the next spModal instance

// However, when we open that spModal, we want to close the first spModal instance

$scope.onModal2 = function(){

   $scope.$parent.$parent.$dismiss();
    $scope.open2 = spModal.open({
        title: 'Modal two',

        buttons: [
              {label:'cancel', cancel:true},
              {label: 'Ok', primary:true}
         ]
     })
}

Demo:

spModal Example

[Peter de Bock1]

Many thanks! 

I am using it within an spModal with an embedded widget (clone of "form" widget). Now after saving the form, I can easily close the Modal using:  $scope.$parent.$parent.$dismiss();

I have added it into the constructResponseHandler.

 Regards, Peter

[ravitejas]

Thank you alot