How to implement the concept of gmail window in single page applications?

Question

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

• I am very interested in making something similar to the fact that gmail creates a popup on one page

• I have no idea how to implement such a thing. Please give me instructions on how to do this.

• I am interested in creating it using AngularJS

PS Sorry for the broad question, but I really don’t know what it's called and don’t know what for Google for

Answer 1

You can easily create a popup using a regular div element and some CSS. In particular, the position: fixed CSS property allows you to put something in a position in a window, no matter how it scrolls.

Here is a simple JSFiddle demonstrating the technique: http://jsfiddle.net/BinaryMuse/ndr2Q/

You can click on the titles of the books to expand their description, which I hope will make the preview window tall enough to scroll. (If not, just resize the window.) No matter where in the scrollable document the pop-up window (which is a regular element with ng-show and some CSS) is in the lower right corner of the screen.

You can find libraries such as Bootstrap, which are jQuery plugins so you can create pop-ups on a page, but in general they are designed to prevent user interaction with page after modal in any useful way. This method allows you to scroll and use the page in the background, similar to the Gmail interface.

Answer 2

Dockmodal is a supportive Gmail modular plugin that has the ability to minimize and restore open modal dialogs.

Answer 3

Check out these angular JS warnings based on bootstrapping:

http://mgcrea.imtqy.com/angular-strap/#/alerts

You can use the provided $ modal service, which also accepts the URL of the template:

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

And it shows it as a popup.