1

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.

2
  • What about a directive? Commented Sep 14, 2013 at 13:01
  • If you're using Bootstrap you can use angular-ui.github.io/bootstrap Commented Sep 14, 2013 at 13:04

3 Answers 3

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

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

1 Comment

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

2 Comments

that's a problem if you don't use bootstrap!
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.
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

2 Comments

that's a problem if you don't use bootstrap!
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.