angularjs - 防止在点击模式外部时关闭 Foundation 模式

标签 angularjs modal-dialog zurb-foundation

我不希望当我点击背景时模式消失。我希望它保持显示,直到我单击模式内的按钮。这是一个代码笔链接

http://codepen.io/anon/pen/JdNXGd

这是 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;
  };
}]);

最佳答案

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

backdrop : 'static'

进入$modal.open

关于angularjs - 防止在点击模式外部时关闭 Foundation 模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30677280/

相关文章:

angularjs - 为什么我不能在 Firefox 中绑定(bind)到 Angular 模型的输入中输入文本?

javascript - “Thinking in AngularJS”,如果我有jQuery背景?

html - 在 Foundation Zurb 中居中 Div 在顶部和两个 div 之间

javascript - 下拉菜单在屏幕底部被切断

javascript - 推荐部分的 HTML 问题

javascript - 如何在实体化的每4列中显示产品?

jQuery UI 对话框冲突

reactjs - 如何通过打开模式显示数组元素?

.net - 以与 NSWindow 相同的方式显示 WPF 模式窗口/对话框/面板,可以像 Cocoa 中的工作表一样显示

javascript - Angular Directive(指令) ng-repeat 范围和服务