如何在单页应用程序中实现gmail组合窗口概念？

Question

• 我正在开发一个项目，用户可以更轻松地快速添加交易。

• 我非常有兴趣做一些类似于gmail在单页上弹出的内容

• 我不知道如何实现这样的事情。请告诉我如何做这些事情的指示

• 我有兴趣使用AngularJS构建它

P.S对于一个广泛的问题很抱歉，但我真的不知道这是什么叫做，也不知道谷歌要做什么

Answer 1

您可以使用常规div元素和一些CSS轻松构建类似的弹出窗口。特别是，position: fixed CSS属性可以让你在窗口的某个位置放置一些东西，无论它如何滚动。

这是一个简单的JSFiddle，演示了这项技术：http://jsfiddle.net/BinaryMuse/ndr2Q/

您可以点击图书的标题来扩展他们的描述，这有望使预览窗口足够高以滚动。 （如果没有，只需调整窗口大小。）无论您在文档中的哪个位置滚动，“弹出窗口”窗口（只是一个带有ng-show和一些CSS的常规元素）都会保留在窗口的右下方。屏幕。

您可以找到提供jQuery插件的库（如Bootstrap），以允许您在页面上执行弹出窗口，但一般来说，它们旨在阻止用户与后面的页面进行交互模态以任何有用的方式。这样的技术允许您滚动并在后台使用类似于Gmail界面的页面。

Answer 2

Dockmodal是一个类似Gmail的可停靠模式插件，可以选择最小化和恢复打开的模态对话框。

Answer 3

根据bootstrap检查这些角度JS警报：

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

您也可以使用提供模板网址的$ modal服务：

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

并将其显示为弹出窗口。