AngularJS. UI Bootstrap modal does not close on backdrop click when using custom styles

Question

I am using UI Bootstrap modal with custom styles. When using default Bootstrap styles, click on the backdrop element closes the modal, but when using custom styles, click on the backdrop element does nothing.

Below are code samples and the link to plunkr. Custom CSS and Bootstrap CSS are linked in the head comment them out to check.

app.js

angular.module('testApp', ['ui.bootstrap']).controller('BodyCtrl', BodyCtrl);

BodyCtrl.$inject = ['$uibModal'];

function BodyCtrl($uibModal) {
  var vm = this;

  vm.openModal = openModal;

  function openModal() {
    var modal = $uibModal.open({
      templateUrl: 'modal.html',
      controller: function() {

      },
      controllerAs: 'modal'
    })
  }
}

index.html

<!DOCTYPE html>
<html ng-app="testApp">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- <link rel="stylesheet" href="main.css"> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.4.0/ui-bootstrap-tpls.min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="BodyCtrl as body">
  <button type="button" ng-click="body.openModal()">Open modal</button>
</body>
</html>

modal.html

<h1>Modal</h1>

main.css

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
}
.modal {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 480px;
  background: #ffffff;
}

Svyatoslav · Accepted Answer · 2017-01-13 11:03:27Z

1

AngularJS listens for a click on the .modal element, not the .modal-backdrop. With following changes to main.css it does work.

main.css

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
}

.modal-dialog {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 480px;
  background: #ffffff;
}

answered Jan 13, 2017 at 11:03

Svyatoslav

712 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS. UI Bootstrap modal does not close on backdrop click when using custom styles

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related