javascript - 如何在单页应用程序中实现 gmail 撰写窗口概念?

标签 javascript jquery angularjs angularjs-directive

  • 我正在从事一个项目,用户可以更轻松地快速添加交易。

  • 我非常有兴趣做一些类似于 gmail compose pop up 在单个页面上做的事情

enter image description here

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

  • 我有兴趣使用 AngularJS 构建它

P.S 很抱歉问了一个宽泛的问题,但我真的不知道这叫什么,也不知道要谷歌什么

最佳答案

您可以使用常规 div 元素和一些 CSS 非常轻松地构建这样的弹出窗口。特别是,position: fixed CSS 属性可以让您将内容放在窗口的某个位置,无论它如何滚动。

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

Example

您可以单击书名来展开它们的描述,这有望使预览窗口足够高以便滚动。 (如果没有,只需调整窗口大小。)无论您在文档中的哪个位置滚动,“弹出”窗口(只是一个带有 ng-show 和一些 CSS 的常规元素)都停留在屏幕右下角。

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

关于javascript - 如何在单页应用程序中实现 gmail 撰写窗口概念?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16888171/

相关文章:

javascript - react - Redux 应用程序 : "Invalid attempt to spread non-iterable instance" Issue

javascript - AngularJs - 同时进行多个服务调用?

jquery - 格式化网格内的每个语句结果?

javascript - 获取指定父级之前的所有父级信息

javascript - 为什么我不能在给定的 HTML 页面中有两个 ng-app 指令 - AngularJS?

javascript - Chrome 扩展 : How to make background wait executescript?

异步加载内容时 JavaScript 无法识别我的函数?

angularjs - Angular.js 确定哪个按钮导致提交的最佳方法是什么?

angularjs - 将文件上传到 Jhipster 中的目录

javascript - 如何将 DockerEvents 添加到我的 Javascript