Stacking a modal over another modal using angularJS on clicking the backdrop - html

Question

I am trying to make a modal appear on top of another modal (like a stack of modals) automatically when the user clicks on the backdrop of a modal or presses the escape button (in this case a dialog box to ask whether you want to progress further).
The problem is that I am not able to figure out how I can call the event's preventDefault() function as I feel that it is the solution to my problem. Currently, what happens is that on clicking the backdrop, the current modal vanishes and the second modal takes it's place instead of appearing above the current modal, putting it in the backdrop.
Here is my code snippet :
The beginning -
(function () {
'use strict';
angular
.module('controller.main', [])
.controller('Main', ['$location', '$state', '$uibModal', 'user', 'auth', 'model', function ($location, $state, $uibModal, user, auth, model) {
var vm = this;
The code in question that is supposed to do the expected task -
vm.openConfirmCancelDB = function (size)
{
$uibModal.open({
animation: vm.animationsEnabled,
templateUrl: '/views/confirmCancelProcessModal.html',
controller: 'Cancel',
controllerAs: 'cancel',
size: size,
backdrop: 'static',
resolve: {}
});
};
vm.openLogin = function (size)
{
var OLP = $uibModal.open(
{
animation: vm.animationsEnabled,
templateUrl: '/views/login.html',
controller: 'Modal',
controllerAs: 'modal',
size: size,
//backdrop: 'static',
resolve: {
inUser: function () {
var user = {};
return user;
}
}
});
OLP.result.then(function()
{
//event.preventDefault();
},
function ()
{
vm.openConfirmCancelDB('sm');
});
};
vm.register = function (size)
{
console.log(vm.registerform);
var RP = $uibModal.open(
{
animation: vm.animationsEnabled,
templateUrl: '/views/register.html',
controller: 'Registration',
controllerAs: 'modal',
//backdrop: 'static',
size: size,
resolve: {
inUser: function () {
var user = {
email: vm.email,
password: vm.password
};
return user;
}
}
});
RP.result.then(function()
{
//event.preventDefault();
},
function ()
{
vm.openConfirmCancelDB('sm');
});
};
openConfirmCancelDB() is the function that helps in opening the dialog box. The problem is how I can call preventDefault() function in order to get the current modal to stay in the backdrop while the dialog box appears on top of this modal. How can I go about accessing the event and its preventDefault function? Also, any other method that can help solve my problem is also fine with me.