在单击模态外部时阻止关闭基础模态

时间:2015-06-05 23:29:06

标签: angularjs modal-dialog zurb-foundation

当我点击背景时,我不希望模态消失。我希望它能继续显示,直到我点击模态内的按钮。这是一个代码链接

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

这里是角度代码

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

2 个答案:

答案 0 :(得分:2)

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

import java.awt.*;
public class TrueColors2
{
   public static void main(String[] args)
   {
       Picture pictureObj = new Picture("WashingtonMonument.png");
       //picutreObj.explore();
       int redValue = 0; int greenValue = 0; int blueValue = 0;

       Pixel targetPixel = new Pixel(pictureObj, 0, 0);
       Color pixelColor = null;

       for(int y = 0; y < pictureObj.getHeight(); y++)
       {
           for(int x = 0; x < pictureObj.getWidth(); x++)
           {
               targetPixel = pictureObj.getPixel(x,y);
               pixelColor = targetPixel.getColor();

               redValue = pixelColor.getRed();
               greenValue = pixelColor.getGreen();
               blueValue = pixelColor.getBlue();

               pixelColor = new Color(redValue, greenValue, blueValue);
               pixelColor = new Color(100 + pixelColor.getRed(),
                                      pixelColor.getGreen(),
                                      pixelColor.getBlue());
               targetPixel.setColor(pixelColor);

           }
       }


       pictureObj.write("ThirdWashingtonMonument.png");
       pictureObj.show();

   }   
}

进入$ modal.open

答案 1 :(得分:0)

据我所知,您提出的答案不适用于较新版本的Foundation-在搜索backdrop: 'static'时,我只能找到引导模态的唯一参考。基础文档也非常无济于事,仅提及选项参数(https://get.foundation/sites/docs/reveal.html#advanced-options)而未指定可能的选项。

但是我在源代码中四处寻找并找到了这些选项,以防其他任何人尝试这样做:(我使用的是基金会站点6.4x,带有一些jQuery)

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

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

revealModal.open();