I am currently utilizing AngularJS (1.5.9) and ui-bootstrap in my application. I am looking to display a confirmation popup if the user clicks outside of an already open modal.
I have attempted using both controlled exit with $uibModalInstance.close() and non-controlled exit with $uibModalInstance.dismiss(), but the modal closes before displaying the confirm popup.
I also tried using the backdrop: 'static' attribute, but was unable to capture a click event outside of the modal window.
Here is the HTML code:
<div ng-app="myApp">
<script type="text/ng-template" id="myModal.html">
<div class="modal-header">
<h3 class="modal-title">Modal title</h3>
</div>
<div class="modal-body">
Modal content
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<div ng-controller="MyCtrl">
<input type="button" value="Show modal" ng-click="showModal()"/>
</div>
</div>
And here is the JS code:
angular.module("myApp", ['ui.bootstrap'])
.controller("MyCtrl", function($scope, $modal) {
$scope.showModal = function(){
$modal.open({
templateUrl: 'myModal.html',
controller: 'ModalDialogController',
})
.result.then(
function () {
alert("OK");
},
function () {
alert("Cancel");
}
);
}
})
.controller("ModalDialogController", function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('Cancel');
};
});
You can also check out this related fiddle --> Fiddle
After opening the modal and clicking outside, there's an alert with 'Cancel'. However, I want to show another modal to confirm the action of closing the modal. If the user clicks 'Cancel', the previous modal should remain open. If they click 'OK', then both modals should close.
Any suggestions or ideas on how to achieve this?