Open (Show) Bootstrap Modal Popup Window using UI Bootstrap in AngularJS

Last Reply 10 months ago By rani

Posted 10 months ago

How to display Bootstrap Modal Dialog in AngulrJS

I am opening bootstrap modal popup on button click in angularjs but it is showing under Modal Background.

How to solve this.

i am calling like .modal("show")

Posted 10 months ago

Hi rani,

For bootstrap modal you have to use ui.bootstrap.

Refer below links for details.

https://angular-ui.github.io/bootstrap/

https://plnkr.co/edit/?p=preview


Posted 10 months ago

Thanks for the link.

I have managed to do this using the below code.

Default page :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-touch/1.6.1/angular-touch.min.js"></script>
    <script type="text/javascript" src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript">
        var app = angular.module('MyApp', ['ngTouch', 'ngAnimate', 'ui.bootstrap']);
        app.controller("MyController", ['$scope', '$uibModal', function ($scope, $uibModal) {
            $scope.openModal = function () {
                $scope.modalInstance = $uibModal.open({
                    ariaLabelledBy: 'modal-title',
                    ariaDescribedBy: 'modal-body',
                    templateUrl: 'Modal.html',
                    controller: 'ModelHandlerController',
                    controllerAs: '$ctrl',
                    size: 'md', // lg-large // sm-small // md-medium
                    resolve: {
                    }
                });
            }
        }]);
        app.controller("ModelHandlerController", function ($scope, $uibModalInstance) {
            $scope.Cancel = function () {
                $uibModalInstance.dismiss('close');
            }
            $scope.Ok = function () {
                $uibModalInstance.close('save');
            }
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <form id="form1" runat="server">
        <button type="button" ng-click="openModal()">Open Modal Popup</button>
    </form>
</body>
</html>

Modal Page :

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <!-- Modal Popup -->
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"> Greetings</h4>
    </div>
    <div class="modal-body">Welcome to ASPSnippets.com</div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="Ok()">Ok</button>
        <button class="btn btn-warning" type="button" ng-click="Cancel()">Cancel</button>
    </div>
    <!-- Modal Popup -->
</body>
</html>