CODEWITHSUNDEEP
javascriptangularjswebmean-stackmddialog
vishnu
vishnu

Reputation: 634

how to remove the buttons in angular js confirm dialog popup?

I want to remove the buttons in angular material dialog box.

I can't hide using css and jquery because class name is generated by angular js which will hide the buttons in other dialog popups also.

code attached

angular.module('app', ['angular.filter', 'ngMaterial', 'ngMessages'] )
.run(function($rootScope,$mdDialog) {
      $rootScope.showConfirm = function(ev) {
      var confirm = $mdDialog.confirm()
          .title('processing payment')
          .textContent('Please Wait...  we are processing your payment.')
          .ariaLabel('')
          .targetEvent(ev)
          .ok('Conform')
          .cancel('Dont cancel');
          $mdDialog.show(confirm).then(function() {
      $rootScope.status = '';
      }, function() {
      $rootScope.status = '';
      });
      };
    })
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.5/angular-material.js"></script>
  
  <body>
<img src="images/bg-02.jpg" class="z-index-4" />



<div ng-app="app">
  <div class="container">
<a ng-click="showConfirm($event)" href="javascript:void()">open dialog</a>

</div>

Upvotes: 1

Views: 2006

Answers (2)

Fabio Carballo
Fabio Carballo

Reputation: 364

Angular Material has a set of Dialogs that you can use, cofirm dialog is one of those, but if you don't need confirm or cancel button, you can use alert dialog. As @Maxim Shoustin says, you need at least one button, but you can try to leave the ok(' ') with empty string.

Angular Material Modals

$mdDialog.show(
      $mdDialog.alert()
        .parent(angular.element(document.querySelector('#yourDialogEL')))
        .clickOutsideToClose(true)
        .title('Dialog TItle')
        .textContent('Content')
        .ariaLabel('aria labels')
        .ok('Got it!')
        .targetEvent(ev)
    );

Upvotes: 1

Yoni Lerner
Yoni Lerner

Reputation: 52

I recommend create your own custom Dialog, where you will have the requested control.

Upvotes: 0

Related Questions