modal views with angular.js

Question

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.

If you're using Bootstrap you can use angular-ui.github.io/bootstrap — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Sep 14, 2013 at 13:04

holographic-principle · Accepted Answer · 2013-09-14 15:41:20Z

2

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

answered Sep 14, 2013 at 15:41

holographic-principle

19.7k10 gold badges48 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

john smith Over a year ago

pretty good solution that does not need bootstrap! is there a way to combine this with routes as well? so it can have a state and it can be saved as bookmark as well?

Andrew Joslin · Accepted Answer · 2013-09-14 15:22:51Z

0

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 :-)

answered Sep 14, 2013 at 15:22

Andrew Joslin

43k21 gold badges102 silver badges75 bronze badges

2 Comments

john smith Over a year ago

that's a problem if you don't use bootstrap!

Andrew Joslin Over a year ago

You can actually override the templates on the bootstrap project and make it use any CSS you want. That's the "philosophy" of that project - bootstrap by default, but the logic isn't coupled to the DOM layout so any css will work.

Brian Petro · Accepted Answer · 2013-09-14 19:48:41Z

0

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

edited Sep 14, 2013 at 19:48

answered Sep 14, 2013 at 13:04

Brian Petro

1,56716 silver badges32 bronze badges

2 Comments

john smith Over a year ago

that's a problem if you don't use bootstrap!

Brian Petro Over a year ago

The important part to pay attention to is the file modal.js in the above link. This file contains a tested solution for re-usable modals around your site. Get familiar with this code. It will provide a useful reference when building your own. No need to reinvent the wheel.

Collectives™ on Stack Overflow

modal views with angular.js

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related