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

Question

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

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

• 我不知道如何实现这样的事情.请告诉我如何做这些事情的方向

• 我有兴趣使用AngularJS构建它

PS很抱歉有一个广泛的问题,但我真的不知道这叫什么,也不知道谷歌要做什么

Answer 1

你可以使用常规div元素和一些CSS 非常容易地构建一个类似的弹出窗口.特别是,position: fixedCSS属性可以让你在窗口的某个位置放置一些东西,无论它如何滚动.

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

您可以单击书籍的标题来扩展其描述,这有望使预览窗口足够高以滚动.(如果没有,只需调整窗口大小.)无论您在滚动文档的哪个位置,"弹出窗口"窗口(只是带有ng-show一些CSS 的常规元素)都会停留在屏幕的右下角.

您可以找到提供jQuery插件的库(如Bootstrap),以允许您在页面上执行弹出窗口,但通常它们旨在防止用户以任何有用的方式与模式后面的页面进行交互.这样的技术允许您滚动并在后台使用类似于Gmail界面的页面.

Answer 2

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

Answer 3

查看这些基于 bootstrap 的 Angular JS 警报：

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

您还可以使用提供的 $modal 服务，该服务也采用模板 URL：

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

并将其显示为弹出窗口。