自定义模态的关闭按钮

Question

我在controller中使用了modal angular strap，如下：

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

我需要自定义模态框顶部关闭按钮的动作，如下图：。

如何覆盖顶部按钮的关闭操作？

Answer 1

创建您自己的模板并省略按钮上的 ng-click="$hide()"。

请参阅 template 选项下的文档中的 link，其使用方式与您使用 contentTemplate

的方式完全相同

Answer 2

您可以为模态框设置模板，或者为模态框指定一个 ID 并使用 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>

您可以在那里自定义您想要的按钮。或者，在不添加新模板的情况下删除它的好方法是向模态添加一个 id 并使用 css.

隐藏关闭按钮

Javascript

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

CSS

#noCloseButton > .close { display: none; }

自定义模态的关闭按钮

Customize close button of modal

javascript

jquery

angularjs

twitter-bootstrap

angular-strap