Question

我想创建一个带角度的模态视图，但我无法在线找到任何资源。有人能指出我正确的方向吗？

我的意思是模态视图就像点击Facebook上的照片一样：它会在页面顶部打开，以便在背景中点击将返回到主视图。

当然，我不是在寻找有关如何实现灯箱效果的CSS细节。

提前致谢。

Answer 1

在尝试各种选项（包括Angular-UI-bootstrap模式）之后，我找到了一个非常令人满意的自定义解决方案，它提供了您想要的模态所需的所有功能：

<div class="myBackdrop" ng-show="flag.modalOpen" ng-click="closeModal()"></div>
<div class="myModal" ng-show="flag.modalOpen">
  ...
</div>

，其中

// just a boolean flag
$scope.flag = {
  modalOpen: false
}

$scope.closeModal = function() {
  // optionally do something beforehand
  $scope.flag.modalOpen = false;
}

然后您需要的是.myBackdrop和.myModal

的CSS

Answer 2

从ui-bootstrap中查看这个开源模式（在AngularJS中）。它通过指令利用模块化，并涵盖了许多可用性功能。即使没有Bootstrap CSS，这也是构建可重用解决方案的一个很好的参考点。 https://github.com/angular-ui/bootstrap/tree/master/src/modal

Answer 3

您可以使用http://angular-ui.github.io/bootstrap获得全面的解决方案。

您也可以在模态元素上使用ng-show为自己构建简单的解决方案： - ）

angular.js的模态视图

3 个答案: