Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Showing a Popup Window Using Modals in Angularjs

    @munmun.sarkar
    Recommendations Offline Message

    • 0
    • 3
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 37.2k
    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:

    <html>
<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
        </button>
      </div>
</div>
</html>

    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.

    <html>
<script type="text/ng-template" id="confirmAlert.html">
      <div class="modal-body">
        <div class="innerWrap sub-modal">
          <p>
            Do you want to continue?
          </p>
            <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>
                  <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>
                  </div>
              </div>
            </form>
        </div>
      </div>
    </script>
</html>

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

        angular.module('app')
      .controller('AdminListController', function($scope,$modal ) {
    //code
    });

    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 = $modal.open({
        animation: $scope.animationsEnabled,
        templateUrl: 'confirmAlert.html',
        scope: $scope
      });
$scope.cancelDelete = function () {
      console.log("cancel");
      alertModalInstance.dismiss('cancel');
    };

    $scope.ok = function () {
      console.log("ok");
      alertModalInstance.close(true);
    };
    Showing a Popup Window Using Modals in Angularjs
    modal popup angularjs dialogue box angularjs popup using modals in angularjs
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
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: