`

自己写的操作等待浮出层

    博客分类:
  • js
阅读更多

自己写的操作等待浮出层

在实际项目中,用户的某些操作常常需要等待前面的操作完成后再往后进行,这时就需要一个浮出层覆盖整个操作区域。

收集参考了网上的一些方案后,整理了下,写成了通用的方法,与大家分享。
代码很简单,很容易看懂,因此没有加多少注释。

代码还有很多需要改进的地方,将持续更新。



实现功能:
1.使用js代码生成覆盖整个页面的浮出层,不需要单独在页面上定义div层。
2.支持等待一段时间后自动结束,或点击stop按钮结束等待,
3.支持结束等待前,用户自定义操作。
4.用户定制等待提示信息。

使用方法:
代码使用简单,可以通过传入的不同参数,定制不同的功能。
功能由两个function构成:
startWait()
stopWait()

1.startWait
生成浮出层,覆盖整个页面
可传入一个json对象,由四个属性构成
opt={
    message:''
    timer:
    stopBtnEnable:        //
    beforeStop:
}

属性解释:
message:浮出层上,显示的提示信息
timer:等待时间,单位毫秒.等待timer毫秒后,自动结束等待
stopBtnEnable:stop按钮是否可用。如果可用,在message下方将出现一个按钮,点击按钮可以结束等待。
beforeStop:在结束等待前,执行的function的名称

2.stopWait
结束等待,移除浮出层
可以传入一个参数。
beforeStop:在结束等待前,执行的function的名称


 

附件内有demo

  • 大小: 86.2 KB
2
0
分享到:
评论
1 楼 zhuchao_ko 2011-06-15  
 

相关推荐

    CSS+JS图片弹出漂浮特效

    在前端开发中,创建引人入胜的用户体验是至关重要的,而"CSS+JS图片弹出漂浮特效"就是一种实现这一目标的方式...通过深入理解和实践这些知识点,开发者可以提升自己的前端技能,创造出更多富有创意和互动性的网页效果。

    jQuery弹出遮罩层效果完整示例

    本文将详细解析如何使用jQuery实现弹出遮罩层效果,这是一个常见的UI设计元素,常用于提示信息、加载等待或者对话框等场景。 首先,我们需要创建HTML结构。在提供的代码中,有两个按钮分别用于打开和关闭遮罩层,一...

    对话框,日历控件,拖动层

    在IT领域,尤其是在Web开发中,用户界面的设计与交互至关重要,而"对话框"、"日历控件"和"拖动层"是常见的UI组件,它们极大地提升了用户体验。接下来,我们将深入探讨这些知识点。 首先,对话框是网页中一种常见的...

    住宅楼屋面防水工程技术交底.doc

    1. 基层处理:首先清理基层,去除杂物、浮灰和浮浆,对于高出部分应进行剔平,确保基层平整。 2. 冷底子油涂刷:使用配套的冷底子油,通过涂刷或机器喷洒,确保表面均匀,不漏底。等待12至48小时干燥后才能进行下...

    钢筋工程技术交底表.doc

    【钢筋工程技术交底表】是建筑工程中用于指导施工人员进行...综上所述,这份钢筋工程技术交底表详细列出了从施工准备到操作实施的全过程要求,是施工人员遵循的作业指导书,旨在确保钢筋工程的安全、高效和质量达标。

    win7透明图标 玻璃质感指针

    此外,不同的操作状态(如选择、拖动、等待等)会有不同样式的玻璃指针。 4. 自定义设置:用户可以根据自己的喜好自定义透明度和指针样式。在“控制面板”中,选择“外观和个性化”,然后进入“更改窗口颜色和外观...

    【工程文档】-钢筋工程技术交底表.doc

    【钢筋工程技术交底表】 这份文档是针对钢筋工程技术交底的...综上所述,这份钢筋工程技术交底表详细列出了钢筋工程的全过程,从准备到实施,再到质量控制,旨在为施工团队提供明确的操作指南,以保证工程质量和进度。

    IOS人机交互中文

    - **用户体验:**浮出层可以使用户在完成当前任务的同时处理其他任务。 #### 七、iOS技术使用指南 1. **多任务:** - **并发性:**应用程序可以与其他应用程序同时运行。 - **后台任务:**允许应用程序在后台...

    横通道二衬施工技术交底记录大全.doc

    - 清理浮碴、垃圾、积水,铺设土工布和防水板,然后浇筑底板细石混凝土保护层。 - 待底板混凝土达到一定强度后,进行钢筋绑扎,预留搭接长度。 - 底板二次衬砌完成后,进行通道二次衬砌施工,等待混凝土强度达标...

    Android驱动开发权威指南

    第二篇 勿于浮砂筑高台——Linux驱动基础篇 第3章Linux内核综述 3.1 OS基本概念 3.1.1多用户系统 3.1.2用户和组 3.1.3进程 3.1.4 Linux单核架构 3.2 Linux内核综述 3.2.1进程/内核模型综述 3.2.2内存管理综述 3.2.3...

    《程序天下:JavaScript实例自学手册》光盘源码

    12.10 打开窗口的等待提示 12.11 在打开的窗口中返回数据 12.12 创建弹出窗口 12.13 不允许窗口出现滚动条 12.14 页面打开的同时打开另外两个窗口 12.15 慢慢变大的窗口 12.16 设置新打开的窗口为活动窗口 12.17 ...

    墙柱施工缝凿毛施工标准做法.doc

    - 凿毛深度:凿毛要穿透表面浮浆和松弱层,露出的混凝土内石子粒径不少于1/3,这有助于新旧混凝土之间的咬合。 - 清洁要求:凿毛后需彻底冲洗,避免凿毛处有积水,积水会影响新混凝土的浇筑质量和粘结效果。 4. ...

    程序天下:JavaScript实例自学手册

    12.10 打开窗口的等待提示 12.11 在打开的窗口中返回数据 12.12 创建弹出窗口 12.13 不允许窗口出现滚动条 12.14 页面打开的同时打开另外两个窗口 12.15 慢慢变大的窗口 12.16 设置新打开的窗口为活动窗口 12.17 ...

    科学学业考试质量分析.pptx

    此外,试题中还涉及到实验操作的细节,如高锰酸钾制取氧气实验中,等待气泡连续均匀冒出再开始收集气体,是为了提高氧气纯度,防止水槽中的水倒吸。矿泉水瓶压入水中浮力的实验,则引导学生理解浮力的产生、方向以及...

    在word中插入图片课件PPT学习教案.pptx

    最后,如果你需要裁剪图片以适应特定区域或去除不必要的部分,同样在“格式”菜单中找到“裁剪”工具,按照指示操作即可。在完成所有编辑后,记得保存你的工作,以确保所有更改得以保留。 通过以上步骤,你就能在...

    SwipeCardsView和CardView

    CardView通过定义一个背景主题,使内容看起来像是浮在其他元素之上,增加了应用的视觉层次感。在实际开发中,CardView常用于显示诸如新闻摘要、产品信息等独立且有边界的单元。 CardView的主要属性包括: 1. `...

    室内铸铁排水管道安装.docx

    在设备层内敷设排水管道时,应等待模板拆除并清理干净。楼层内安装排水管道则需在结构施工完成后,预留孔洞预留完毕,室内清理干净,标出准确的水平线。 操作工艺遵循一定的流程,包括安装准备、管道预制、污水干管...

    选择结构与起泡法排序-汇编

    如果字符串长度为0,程序应直接返回,不进行任何操作。如果字符串包含重复字符,程序应提示用户重新输入。 2. **字符排序**:对于符合要求的字符串,程序将对其进行冒泡排序,按照字符的ASCII码值从小到大排列。 3. ...

    数据库调优

    1. 语句分析:使用DB2的EXPLAIN工具分析SQL执行计划,找出效率低下的查询。 2. 索引设计:合理创建和使用索引,提高数据检索速度。考虑复合索引、唯一索引和覆盖索引的使用场景。 3. 避免全表扫描:优化查询条件,...

Global site tag (gtag.js) - Google Analytics