How to implement gmail compose window concept in Single Page Applications?

Question

• 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 compose 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

Answer 1

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.net/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.