关闭Angular UI Bootstrap模式对话窗口后,按钮仍处于焦点状态

时间:2016-01-18 13:27:34

标签: javascript angularjs twitter-bootstrap angular-ui-bootstrap bootstrap-modal

模态对话窗口打开后如何避免按钮或链接的:focus状态?

点击的按钮仍处于:focus状态,一旦关闭Angular UI Bootstrap模式对话窗口,无论$uibModalInstance.close();还是$uibModalInstance.dismiss('cancel');

演示:https://jsfiddle.net/3w65mjnt/



angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('ModalDemoCtrl', function($scope, $uibModal, $log) {
  $scope.open = function() {
    var modalInstance = $uibModal.open({
      size: 'sm',
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl'
    });
    modalInstance.result.then(function() {
      console.log("close");
    }, function() {
      console.log("cancelled");
    });
  };
}).controller('ModalInstanceCtrl', function($scope, $uibModalInstance) {
  $scope.ok = function() {
    $uibModalInstance.close();
  };
  $scope.cancel = function() {
    $uibModalInstance.dismiss('cancel');
  };
});

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="ui.bootstrap.demo">
  <div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
      <div class="modal-header">
        <h3 class="modal-title">I'm modal</h3>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non similique facilis necessitatibus. Sequi quos possimus quidem blanditiis nobis ipsam vitae amet unde eos id. Beatae natus nemo dolores minima ullam!</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
      </div>
    </script>

    <button type="button" class="btn btn-default" ng-click="open()">Open Modal WIndow</button>
  </div>
</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案