• I am working on a project where it would be easier for users to quickly add transactions.

• I am very much interested to do something similar to what gmail pose pop up does on the single page

• I have no idea how to implement such a thing. Please give me directions about how to do such things

• I am interested in building it using AngularJS

P.S Sorry for a broad question, but I really don't know what this is called and don't know what to Google for either

• I am working on a project where it would be easier for users to quickly add transactions.

• I am very much interested to do something similar to what gmail pose pop up does on the single page

• I have no idea how to implement such a thing. Please give me directions about how to do such things

• I am interested in building it using AngularJS

P.S Sorry for a broad question, but I really don't know what this is called and don't know what to Google for either

• javascript
• jquery
• angularjs
• angularjs-directive

• Google "modal windows with javascript" - JQuery UI and Bootstrap do nice ones. – mccannf Commented Jun 2, 2013 at 23:20
• 1 This question may also help on Bootstrap modals and angularjs working together. – mccannf Commented Jun 2, 2013 at 23:22

3 Answers 3

You can construct a popup like that very easily using a regular div element and some CSS. In particular, the position: fixed CSS property will let you put something at a position on the window, no matter how it scrolls.

Here is a simple JSFiddle that demonstrates the technique: http://jsfiddle/BinaryMuse/ndr2Q/

You can click the titles of the books to expand their description, which will hopefully make the preview window tall enough to scroll. (If not, just resize the window.) No matter where in the document you scroll, the "popup" window (which is just a regular element with an ng-show and some CSS) stays at the bottom-right of the screen.

You can find libraries, like Bootstrap, that present jQuery plugins to allow you to do popups on the page, but in general they're designed to prevent the user from interacting with the page behind the modal in any useful way. A technique like this allows you to scroll around and use the page in the background similar to Gmail's interface.

Dockmodal is a Gmail like dockable modal plugin that has the option to minimize and restore opened modal dialogs.

Check out these angular JS alerts based on bootstrap:

http://mgcrea.github.io/angular-strap/#/alerts

You can use the provided $modal service that takes a template URL as well :

var modal = $modal({template: '/js/app/views/elements/modal-wele.html', show: true, backdrop: 'static'});

And shows it up as a popup.