防止在模式外点击时关闭基金会模式。

Question

我不想让模态在我点击背景时消失。我想让它一直显示，直到我点击模式内的按钮。这里有一个代码本的链接

http:/codepen.ioanonpenJdNXGd

这里是Angular代码

app = angular.module('app', ['ngAnimate']);
app.directive('modal', 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.hideModal = function() {
        scope.show = false;
      };
    },
    template: "<div class='ng-modal' ng-show='show'>"+
                "<div class='reveal-modal' data-options='close_on_background_click:false' ng-show='show'>"+
                  "<div ng-transclude></div>"+
                  "<a class='close-reveal-modal' ng-click='hideModal()'>&#215;</a>"+
                "</div>"+
                "<div class='reveal-modal-bg' ng-click='hideModal()'></div>"+
              "</div>"
  };
});

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

Answer 1

终于找到了有效的解决方案。我添加了

backdrop : 'static'

进入$modal.open

Answer 2

据我所知，你提出的答案对新版本的Foundation不适用--我在搜索时能找到的唯一参考资料是关于 backdrop: 'static' 是针对bootstrap模式的。基础文档也很无助，只顺便提到了一个选项参数 (https:/get.foundationsitesdocsreveal.html#advanced-options)，但没有说明可能的选项是什么。

不过我在源代码中找到了这些选项，在这里，如果有人想这样做的话。(我使用的是Foundation-sites 6.4x，还有一些jQuery)

let $modal = $('.my-modal');

let revealModal = new Foundation.Reveal(
  $modal, {
  closeOnClick: false,
  closeOnEsc:   false
});

revealModal.open();