CODEWITHSUNDEEP
javascriptcssangularjsangular-ui-bootstrapbootstrap-modal
Ravvy
Ravvy

Reputation: 199

Can't dismiss custom UI Bootstrap modal by backdrop click

Using CSS, I wanted to customize the modal dialog. I wanted the width to be set to 100%, the modal fixed to the bottom, and animations to come from the bottom.

It worked fine except I am unable to click the backdrop to dismiss the modal. If I remove the padding and margin CSS changes, I am able to dismiss the modal only if I click the backdrop near the modal itself. This makes me wonder, are backdrop clicks only captured within a certain range of a modal?

HTML:

<body ng-app="TestApp">
    <div ng-controller="MainController">
        <button ng-click="testModal()">Test Modal</button>
    </div>
</body>

<script type="text/ng-template" id="TestModal.html">
  <div class="modal-header">
  <h3 class="modal-title">Modal Test</h3>
  </div>
  <div class="modal-body">
  </div>
  <div class="modal-footer">
      <button class="btn btn-primary" type="button">OK</button>
      <button class="btn btn-warning" type="button">Cancel</button>
  </div>
</script>

JavaScript:

angular.module("TestApp", ["ui.bootstrap"]);

angular
    .module("TestApp")
    .controller("MainController", ["$scope", "$uibModal", MainController]);

function MainController($scope, $uibModal) {
    $scope.testModal = function () {
        $uibModal.open({
            animation: true,
            templateUrl: 'TestModal.html'
        });
    };
}

CSS:

.modal {
    top: auto; /* IE */
    top: initial;
}

.modal-dialog {
  width: 100%;
  margin: 0;
  padding: 0;
}

.modal-content {
  height: auto;
  border-radius: 0;
}

.modal.fade:not(.in) .modal-dialog {
    -webkit-transform: translate3d(0, 25%, 0);
    transform: translate3d(0, 25%, 0)
}

Here's a link to a fiddle: https://jsfiddle.net/Ravvy/fyjLfxj0/1/

Upvotes: 0

Views: 413

Answers (1)

Rob J
Rob J

Reputation: 6629

Use this as your modal-dialog class:

.modal-dialog {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}

and get rid of the .modal class.

Upvotes: 1

Related Questions