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

Euphemiah

Google "modal windows with javascript" - JQuery UI and Bootstrap do nice ones. – Mispronounce

This question may also help on Bootstrap modals and angularjs working together. – Mispronounce

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.

Willaims

Can you please explain in detail.... I am new to javascript so can't understand that what you had done in fiddle.... – Prayerful

Answer 2

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

Ameliorate

Excellent. This is what i was looking. – Rounded

Answer 3

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-welcome.html', show: true, backdrop: 'static'});

And shows it up as a popup.

Waterscape