模态对话窗口打开后如何避免按钮或链接的: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;