CODEWITHSUNDEEP
angularjs
john smith
john smith

Reputation: 561

modal views with angular.js

I would like to create a modal view with angular, but I cannot find any resource online. Can anyone point me into the right direction?

What I mean by modal view is like when clicking on a photo on facebook: it will open on top of the page so that clicking in the background will bring back to the main view.

Of course, I am not looking for css details on how to achieve the lightbox effect.

Thanks in advance.

Upvotes: 1

Views: 4710

Answers (3)

Brian Petro
Brian Petro

Reputation: 1567

Check out this open-source modal(in AngularJS) from ui-bootstrap. It takes advantage of modularity through directives and covers many usability features. This would be a great reference point to build a re-usable solution, even without the Bootstrap CSS. https://github.com/angular-ui/bootstrap/tree/master/src/modal

Upvotes: 0

holographic-principle
holographic-principle

Reputation: 19738

After experimenting with various options, including the Angular-UI-bootstrap modals, I have come to a pretty satisfying custom solution that provides all functionality you'd want from a modal:

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

where

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

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

Then all you need is the CSS for .myBackdrop and .myModal

Upvotes: 2

Andrew Joslin
Andrew Joslin

Reputation: 43023

You can use http://angular-ui.github.io/bootstrap for a comprehensive solution.

You can also build it yourself for simple solutions using ng-show on a modal element :-)

Upvotes: 0

Related Questions