Angular Bootstrap Modal Example Using Boostrap UI

Modal Box window can be used for open popup model to add a record, edit the record and show a confirmation box to delete a record from the database, no doubts Twitter Bootstrap is a wonderful CSS framework for UI development and angularjs is a popular framework for front-end development.

We will use bootstrap angular UI to create Modal popup windows using angularjs service.

Since I am using bootstrap UI which are having all bootstrap components as angular-js directives, We have only dependency Bootstrap 3.0 and angular 1.2+ for Modal box service. You can use this service to show a confirmation popup message and performs action as per end-user response.

How to Use Bootstrap UI with Angularjs

We need to include all dependencies library files like bootstrap CSS, angularjs and bootstrap UI files into the head section of index.html file.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap-tpls.js"></script>

You can simply add bootstrap UI as a dependency in your angularjs application file, mine is app.js file where I’ll inject bootstrap-ui like below:

angular.module('testApp', [
	'config',
	'ui.bootstrap'
]);

Creating Bootstrap Modal Service Using Angularjs

I am creating common confirm box functionality for angularjs application. We will create a template file and service js file to handle modal UI operation. We will create the following js and HTML file in this simple ui bootstrap modal example.

1. /shared/confirmBox/modalConfirmService.js : This file will create a bootstrap UI modal box as a common service.
2. /shared/confirmBox/confirmBox.html : This file will contain all HTML elements and define the UI of modal box.

We will create a Modal box HTML layout to show angularjs modal window, We will add the below code into app/shared/confirmBox/confirmBox.html file.

<div class="modal-header">

<h3>{{modalOptions.headerText}}</h3>

</div>

<div class="modal-body">
  
{{modalOptions.bodyText}}
</div>

<div class="modal-footer">
  <button type="button" class="btn btn-primary" data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>
  <button class="btn btn-danger" data-ng-click="modalOptions.ok();">{{modalOptions.actionButtonText}}</button>
</div>

I have used modalOptions parameters like header text, close button text, ok button text, and modal body. You can add more parameters in this file as per your need.

We will create modalConfirmService.js file and define modalConfirmService as a service into modalConfirmService file.

angular.module('testApp').service('modalConfirmService', [
    function () {
	}
]);

We will inject the bootstrap modal directive as a dependency within this angularjs service.

angular.module('testApp').service('modalConfirmService', ['$uibModal',
    function ($modal) {
	}
]);

As you can see, I used ‘$uibModal’ as a dependency that is responsible for the bootstrap UI modal box. We will create a new JavaScript variable modalDefaults : for the default configuration of bootstrap ui modal and modalOptions : for default options for modal box. The default configuration variable will take the following parameters.

var modalDefaults = {
	backdrop: true,
	keyboard: true,
	modalFade: true,
	templateUrl: '/app/shared/confirmBox/confirmBox.html'
};

We will define modalOptions variable and pass the following parameters:

var modalOptions = {
	closeButtonText: 'Close',
	actionButtonText: 'OK',
	headerText: 'Proceed?',
	bodyText: 'Perform this action?'
};

We will create showModal() method which will use to show the modal window. We have passed parameters into modalDefaults and modalOptions function to configure and set options into Bootstrap ui modal HTML UI.

this.showModal = function (customModalDefaults, customModalOptions) {
            if (!customModalDefaults) customModalDefaults = {};
            customModalDefaults.backdrop = 'static';
            //Create temp objects to work with since we're in a singleton service
            var tempModalDefaults = {};
            var tempModalOptions = {};

            //Map angular-ui modal custom defaults to modal defaults defined in service
            angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

            //Map modal.html $scope custom properties to defaults defined in service
            angular.extend(tempModalOptions, modalOptions, customModalOptions);

            if (!tempModalDefaults.controller) {
                tempModalDefaults.controller = function ($scope, $uibModalInstance) {
                    $scope.modalOptions = tempModalOptions;
                    $scope.modalOptions.ok = function (result) {
                        $uibModalInstance.close(result);
                    };
                    $scope.modalOptions.close = function (result) {
                        $uibModalInstance.dismiss('cancel');
                    };
                }
            }

            return $modal.open(tempModalDefaults).result;
        };


How To Use Angularjs Modal in Angular Application

We have created a bootstrap modal box angularjs service. We can use this modal window service, in the same way, as another angular service that is using our app. We need to inject modalConfirmService in the controller where we need a modal box and call showModal() method option and configuration parameters as you needed for the modal box.

We need to include all dependencies libraries like bootstrap css, angularjs and bootstrap UI files, if you included all dependency files then you don’t need to include them again. You just need to include modalConfirmService.js and app.js (This is the main angularjs application file where you have defined bootstrap ui dependency) file into the header of the main file.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap-tpls.js"></script>

<script src="app.js"></script>
<script src="app/shared/confirmBox/modalConfirmService.js" type="text/javascript"></script>

We will create an index.html file and added an HTML button that is responsible to show a modal box when the user will clicked this button. It’s very easy and simple using angularjs. We will use ng-click the directive to fire click event on button.

<div class="container">
<h1>Simple Modal Box</h1>
<div class="well"><button class="btn btn-default" type="button">Click to open modal</button></div>
<div class="alert alert-success hide">{{msg}}</div>
</div>

I have created a message div that will show a message on the click of the Yes button. We will write the below code in the controller file.

angular.module('TestApp.controllers', []).controller('testController',  ['$scope', 'modalConfirmService', function($scope, modalConfirmService) {
		$scope.msg = '';
		$scope.showModal = function(){

         var options = {
               closeButtonText: 'Cancel',
               actionButtonText: 'Yes',
               headerText: 'Modal Header ?',
               bodyText: 'Are you sure you want to delete?'
            };

         modalConfirmService.showModal({}, options).then(function (result) {
			$scope.msg = 'You have clicked Yes';
         });
		}
}]);

I have injected modalConfirmService in testController controller and use this service method showModal() with some options parameters.

I hope it helps you. You can drop your suggestion, problems and views into below comment section. I’ll try my best to solve your problem.

You can download the source code and Demo from the below link.