Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Showing a Popup Window Using Modals in Angularjs

    • 0
    • 3
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 36.5k
    Comment on it

    A dialogue box is called modal when it restricts the other functionality of the page until the dialogue box has been closed.



    Here is the code for opening a simple modal popup using ‘modals’ in angularjs.

    first create a simple HTML template and call a function on a button click in which the modal will get open:

    <div class="maiWidth">
     <h2 class=“adminhead”>Admin List</h2>
          <div class="col-sm-3 columns">
            <button type="" class="btn grn-btn" ng-click=“Confirm()”>Confirm Admin

    In the above code I have called a confirm function on a button click.

    Then add this script for the modal template like this without html tag.

    <script type="text/ng-template" id="confirmAlert.html">
          <div class="modal-body">
            <div class="innerWrap sub-modal">
                Do you want to continue?
                <form class="form-horizontal">
                  <div class="row btn-col min-btn">
                      <div class="col-sm-4 col-sm-offset-1 columns">
                          <button class="btn grn-btn m-t-0" type="" ng-click="ok()">Ok</button>
                      <div class="col-sm-5 col-sm-offset-1 columns">
                          <button class="btn grn-btn line-btn  m-t-0" type="" ng-click="cancelDelete()">Cancel</button>

    Now you just need to inject $modal into your controller.

          .controller('AdminListController', function($scope,$modal ) {

    Now add this code into your controller.

    In this code I am simply calling the template through the id which I have used the modal template. And two functions are called for cancel and ok through which the modal will get closed as per the function.

    $scope.Confirm = function ( ) {
          alertModalInstance = ${
            animation: $scope.animationsEnabled,
            templateUrl: 'confirmAlert.html',
            scope: $scope
    $scope.cancelDelete = function () {
        $scope.ok = function () {
    Showing a Popup Window Using Modals in Angularjs

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: