CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrapangular-strap
Mohamed Yakout
Mohamed Yakout

Reputation: 3046

Customize close button of modal

I used modal angular strap in controller, as the following: 

$scope.modal = $modal({
   scope: $scope, 
   title: 'My Title', 
   content: text, 
   html: true, 
   contentTemplate: 'views/partials/myTemplate.html', 
   show: true, 
   keyboard: false, 
   backdrop: "static"
});

I need to customize the action of close button in the top of modal at the following image: Modal Example.

How can I overwrite the close action of top button ?

Upvotes: 0

Views: 5465

Answers (2)

Ed Knowles
Ed Knowles

Reputation: 1925

You can either set a template for the modal, or give the modal an ID and use CSS.

<!-- You can use a custom html template with the `data-template` attr -->
<button ... data-template="modal/docs/modal.demo.tpl.html" ...

HTML

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" ng-show="title">
        <button type="button" class="close" ng-click="$hide()">&times;</button>
        <h4 class="modal-title" ng-bind-html="title"></h4>
      </div>
      <div class="modal-body" ng-show="content">
         ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
        <button type="button" class="btn btn-primary" ng-click="$hide()">Save changes</button>
      </div>
    </div>
  </div>
</div>

There you can customise the button how you would like. Alternitively a good way to just remove it without adding a new template would be to add an id to the modal and hide the close button with css.

Javascript

$scope.modal = $modal({
   ...
   id: 'noCloseButton'
});

CSS

#noCloseButton > .close { display: none; }

Upvotes: 0

charlietfl
charlietfl

Reputation: 171690

Create your own template and leave out the ng-click="$hide()" on the button.

See link in docs under template option which would be used exactly the same way you are using contentTemplate

Upvotes: 2

Related Questions