Creating modal popups is a common requirement in AngularJS applications. These modals are often used for providing feedback to users or confirming actions dynamically. This guide explains how to implement a modal popup in AngularJS that displays a custom message based on the button clicked.
Problem Overview
A common requirement in AngularJS applications is to show a modal popup with a message like:
- “You clicked the Cancel button”
- “You clicked the Deny button”
Challenges include
- Dynamically setting messages based on button actions.
- Ensuring a clean, reusable design for the modal popup.
Solution: Simple Modal Popup in AngularJS
This solution uses a straightforward AngularJS controller to manage modal visibility and message content, paired with a simple HTML structure for the modal.
Example
<head>
<style>
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background: #fff;
padding: 20px;
border-radius: 5px;
text-align: center;
width: 300px;
}
.modal-header {
font-weight: bold;
margin-bottom: 10px;
}
.modal-buttons {
margin-top: 15px;
}
</style>
</head>
<body ng-controller="MainController">
<button ng-click="showModal('Cancel')">Cancel</button>
<button ng-click="showModal('Deny')">Deny</button>
<button ng-click="showModal('Success')">Success</button>
<button ng-click="showModal('Remove')">Remove</button>
<custom-modal
show="isModalVisible"
message="modalMessage"
on-close="closeModal()">
</custom-modal>
<script>
angular.module('modalApp', [])
.controller('MainController', ['$scope', function ($scope) {
$scope.isModalVisible = false;
$scope.modalMessage = '';
$scope.showModal = function (buttonName) {
$scope.modalMessage = `You clicked on ${buttonName} button`;
$scope.isModalVisible = true;
};
$scope.closeModal = function () {
$scope.isModalVisible = false;
};
}])
.directive('customModal', function () {
return {
restrict: 'E',
scope: {
show: '=',
message: '=',
onClose: '&'
},
template: `
<div class="modal-overlay" ng-show="show">
<div class="modal-content">
<div class="modal-header">Modal Popup</div>
<div class="modal-body">
<p>{{message}}</p>
</div>
<div class="modal-buttons">
<button ng-click="close()">Close</button>
</div>
</div>
</div>
`,
link: function (scope) {
scope.close = function () {
scope.onClose();
};
}
};
});
</script>
</body>
How It Works
1. Controller Logic:
The MainController manages the visibility of the modal (isModalVisible) and the message (modalMessage).
The showModal function sets the appropriate message based on the button clicked and makes the modal visible.
2. Directive:
The customModal directive creates a reusable modal component.
It uses an ng-show directive to toggle visibility and onClose to handle the close action.
3. Styling:
Basic styles are added to make the modal look centered and visually distinct.
When you click any button, the corresponding message will appear in the modal, and you can close it by clicking the “Close” button.
Conclusion
Using this approach, you can implement a dynamic modal popup in AngularJS with minimal effort. It’s an effective solution for scenarios requiring context-sensitive feedback to user actions.
Support On Demand!
