Custom Modal Control using Bootstrap CSS and AngularJS

When we want to develop a web-based application using AngularJs, it often requires a modal dialog box control with some extra features like height, width, title and so on. But like classic ASP.NET, a ready-made control is not always available in the AngularJs framework. If we want to create a custom modal dialog control, we can create it easily. Using this article, we will learn how to create a custom modal dialog control.

For that, we will first open Visual Studio and create a blank ASP.NET web application. We then need to install some NuGet packages such as AngularJs, Bootstrap and AngularUI.

Figure 1: AngularJs UI Bootstrap

 

First we will create a modal directory with the attributes. For this, create an HTML file named modal.html and add the following code to that file:

<div class="modal-dialog" ng-show="showModal">
    <div class="modal-backdrop"></div>
    <div class="modal-content" >"height:{{height}};width:{{width}};left:{{left}};top:{{top}};">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="close();" ng-hide="HideCloseButton">×</button>
            <h4>{{ModalParam.title}}</h4>
        </div>
        <div class="modal-body" ng-transclude >"height:{{BodyHeight}};">
        </div>
    </div>
</div>

First, we need to define the Angular app as in the following:

var CustomCtrlApp = angular.module('CustomCtrlApp', ['ui.bootstrap']);

In the script folder, add a JavaScript file named Modal.js that is basically the controller file of the modaldirectory. In the JavaScript file, add the following code:

CustomCtrlApp.directive('modal', function () {
    return {
        restrict: 'EA',
        scope: {
            ModalParam: '=modalSetting'
        },
        transclude: true,
        replace: true,
        templateUrl: '../HTMLTemplate/Modal.html',
        controller: function ($scope, $element, $attrs) {
            $scope.showModal = false;
            if ($scope.ModalParam == undefined) {
                $scope.ModalParam = {};
            }

            if ($scope.ModalParam.width == undefined) {
                $scope.width = '500px'
                $scope.ModalParam.width = 500;
            }
            else {
                if ($scope.ModalParam.width > 1000) {
                    $scope.ModalParam.width = 1000;
                }
                $scope.width = $scope.ModalParam.width + 'px';
            }

            if ($scope.ModalParam.height == undefined) {
                $scope.height = '400px'
                $scope.ModalParam.height = 400;
            }
            else {
                if ($scope.ModalParam.height > 900) {
                    $scope.ModalParam.height = 900;
                }
                $scope.height = $scope.ModalParam.height + 'px';
            }

            if ($scope.ModalParam.showCloseButton == undefined) {
                $scope.ModalParam.showCloseButton = true;
            }

            if ($scope.ModalParam.showCloseButton == true) {
                $scope.HideCloseButton = false;
            }
            else {
                $scope.HideCloseButton = true;
            }

            $scope.left = Math.round((screen.availWidth - $scope.ModalParam.width) / 2, 0) + 'px';
            $scope.top = Math.round((screen.availHeight - $scope.ModalParam.height - 20) / 2, 0) + 'px';
            $scope.BodyHeight = ($scope.ModalParam.height - 40) + 'px';

            function assignModalMethod() {
                $scope.ModalParam.method = {
                    show: function () {
                        $scope.show();
                    },
                    close: function () {
                        $scope.close();
                    },
                    setTitle: function (args) {
                        $scope.ModalParam.Title = args;
                    }
                }
            }

            $scope.show = function () {
                $scope.showModal = true;
            }

            $scope.close = function () {
                $scope.showModal = false;
            }

            assignModalMethod();
        }
    };
});

Next, add an HTML page in the HTML folder named ModalDemo.html and add the following code there: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Model Demo</title>
    <script src="../RefScript/angular.min.js"></script>
    <script src="../RefScript/ui-bootstrap.min.js"></script>

    <script src="../PageScript/CustomCtrlApp.js"></script>
    <script src="../DirectiveScript/Modal.js"></script>
    <script src="../PageScript/ModalDemo.js"></script>

    <link href="../Ref/bootstrap.min.css" rel= />
    < type="text/css">
        .modal-backdrop {
            opacity: 0.6;
        }

        .modal-content {
            position: fixed;
            z-index: 1041;
            border-radius: 0;
        }

        .modal-header {
            padding: 0px 10px;
        }

        .modal-body {
            overflow-y: auto;
            overflow-x: hidden;
        }
    </>
</head>
<body ng-app="CustomCtrlApp">
    <div ng-controller="ModalDemo">
        <h1>Modal example</h1>
        <button class="btn btn-default" ng-click="toggleModal()">Open modal</button>
        <div>
            <modal modal-setting="ModalArgs">
                <table>
                    <tr>
                        <td>Welcome to Login Form</td>
                    </tr>
                </table>
                <p>hello</p>
            </modal>
        </div>
    </div>
</body>
</html>

Now to define the modaldemo controller, add another JavaScript file in the script folder named modaldemo.js with the following code: 

CustomCtrlApp.controller("ModalDemo", ['$scope', '$http',
    function ($scope, $http) {
        $scope.ModalArgs = {
            title: 'Modal Window',
            width: 750,
            height: 550,
            showCloseButton: true
        };


        $scope.toggleModal = function () {
            $scope.ModalArgs.method.show();
        };

    }]);

Now, run the project and the output will be as in the following:

 

Figure 2: Output Window