CODEWITHSUNDEEP
angularjsmodal-dialog
bookthief
bookthief

Reputation: 2451

Modal in angular lets user click out of it

I have a modal dialog in my angularJS app, but when the user clicks on the greyed out site behind the modal, the modal closes. I want the modal to behave like a modal, ie, you have to respond to what's inside in order to get it to close. Can anyone tell me how to achieve this? Here is a jsbin:

http://jsbin.com/aDuJIku/2/edit

EDIT: Code for future reference:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app='ModalDemo'>
  <div ng-controller='MyCtrl'>
    <button ng-click='toggleModal()'>Open Modal Dialog</button>
    <modal-dialog show='modalShown' width='400px' height='60%'>
      <p>Modal Content Goes here<p>
    </modal-dialog>
  </div>
</body>
</html>

app = angular.module('ModalDemo', []);
app.directive('modalDialog', function() {
  return {
    restrict: 'E',
    scope: {
      show: '='
    },
    replace: true, // Replace with the template below
    transclude: true, // we want to insert custom content inside the directive
    link: function(scope, element, attrs) {
      scope.dialogStyle = {};
      if (attrs.width)
        scope.dialogStyle.width = attrs.width;
      if (attrs.height)
        scope.dialogStyle.height = attrs.height;
      scope.hideModal = function() {
        scope.show = false;
      };
    },
    template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"
  };
});

app.controller('MyCtrl', ['$scope', function($scope) {
  $scope.modalShown = false;
  $scope.toggleModal = function() {
    $scope.modalShown = !$scope.modalShown;
  };
}]);

Upvotes: 2

Views: 3618

Answers (2)

BenCr
BenCr

Reputation: 6052

Assuming you're using Bootstrap set the backdrop to static.

var modalInstance = $modal.open({
    templateUrl: '/App/Documents/Templates/DeleteDocumentDialogTemplate.html',
    backdrop: 'static'
});

Upvotes: 4

Cem &#214;zer
Cem &#214;zer

Reputation: 1283

In this section of your directive's template, remove ng-click='hideModal()' and you're done.

<div class='ng-modal-overlay' ng-click='hideModal()'>

Upvotes: 3

Related Questions