我的前端工具集(五)提示工具之模态窗提示

 

liuyuhang原创,未经允许禁止转载

目录

我的前端工具集

1、需求

很多页面操作都需要提示,比如操作成功,操作失败之类。

总不能没事就console.log或者alert吧。

所以一个操作提示很重要

2、模态窗提示

bootstarp的模态窗可以稍加修改作为提示。主要有两重功能:

  ①提示点击其他地方可消失,代码比较简单。

  ②带有遮罩,提示效果比较明显。

3、html代码

  自己引bootstrap和jquery

    <!-- 提示用模态框 --><div class="modal fade" id="modalTips" tabindex="-1" role="dialog"><div style="width:95%;margin-left:2.5%;margin-top:20px"><div class="modal-content"><div class="modal-header"><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><div class="col-lg-10 col-md-10 col-sm-10 col-xs-10"><h4 class="modal-title" id="modalTipsTitle">title</h4></div><div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"><button type="button" id="tipsTimeOut" class="btn btn-default close pull-right" data-dismiss="modal" aria-hidden="true">关闭</button></div></div></div><div class="modal-body" id="modalTipsBody"></div></div></div></div><div class="btn-group btn-group-sm"><button type="button" class="btn btn-default" onclick="topTipModal(132123123,123123123123,4000)"><span class="glyphicon glyphicon-refresh" style="color: black;padding-right:2px;"></span>测试</button></div>

4、js代码

        /*** 顶部显示提示的模态框* @param:title,提示框的标题内容* @param:tips,提示框的提示内容* @param:speed,提示框自动消失时间,1000为1秒,0-1000会自动转为2000,60秒以上关闭,小于0则一分钟后关闭*/function topTipModal(title, tips, speed) { //modalTipsTitle,modalTipsBody$("#modalTips #modalTipsTitle").html(title);$("#modalTips #modalTipsBody").html(tips);$("#modalTips").modal("show");var speed = speed;if (parseInt(speed) > 0 && parseInt(speed) < 1000) { //1秒之内看不见啥,改为2秒speed = 2000;setTimeout(function() {$("#modalTips").modal("hide");}, speed);} else if (parseInt(speed) >= 1000 && parseInt(speed) < 60000) { //一分钟以内都显示setTimeout(function() {$("#modalTips").modal("hide");}, speed);} else { //tipsTimeOutspeed = 60000;setTimeout(function() { //超过1分钟自动关闭$("#modalTips").modal("hide");}, speed);}var timer = setInterval(function() {$("#modalTips #tipsTimeOut").html(speed / 1000   "秒后关闭");speed = speed - 1000;if (speed < 0) {clearTimeout(timer);$("#modalTips #tipsTimeOut").html("关闭");}}, 1000);}

5、调用与测试

以上!

更多专业前端知识,请上 【猿2048】www.mk2048.com

我的前端工具集(五)提示工具之模态窗提示相关推荐

  1. SU插件情报局 | Fredo工具集:纹理工具(附插件安装包)

    作者:活力网 Andrew 同学们大扎好! 没错 活力网 SU插件情报局 又来了! 这一期的主角是Fredo6 Fredo Tools(简称:FT) ThruPaint(纹理工具)(简称:TP) 没接 ...

  2. Java工具集-MD5加密工具

    简单工具类 写作初衷:由于日常开发经常需要用到很多工具类,经常根据需求自己写也比较麻烦 网上好了一些工具类例如commom.lang3或者hutool或者Jodd这样的开源工具,但是 发现他们之中虽然 ...

  3. java 密码检测_Java工具集-密码检测工具

    代码示例 import java.util.regex.Pattern; /** * @program: simple_tools * @description: 密码检测工具类 * @author: ...

  4. v140平台工具集与v110工具集选择

    今天在编译用vs2012编译C++动态库提示:error MSB8020: The builds tools for v140_xp (Platform Toolset = 'v140_xp') ca ...

  5. Utools 提高编程效率的工具集,号称小工具之王

    一.什么是Utools? 直接上图 粘贴几张我日常的使用 既是插件也是应用 uTools 插件应用: 轻量.安全.简洁.无广告 Alt + 空格键 轻轻松松弹出来

  6. LVM逻辑卷,LVM管理工具集,LVM创建逻辑卷,调整现有磁盘的分区,使用逻辑分区做逻辑卷,扩展卷组大小,扩展逻辑卷的大小

    一.什么是LVM逻辑卷 LVM是 Logical Volume Manager(逻辑卷管理)的简写,它是Linux环境下对磁盘分区进行管理的一种机制,它由Heinz Mauelshagen在Linux ...

  7. 【转】vs平台工具集介绍,vc6~vs2019各IDE对应的工具集版本

    转自:vs平台工具集介绍以及安装 - jack_Meng - 博客园 一.什么是平台工具集: 平台工具集其实是MSBuild 其目录所在C:\Program Files (x86)\MSBuild\M ...

  8. 安卓逆向_0 --- 逆向、安全、工具集

    1.工具集 ​吾爱 工具集 官网:https://www.52pojie.cn/ 工具集:https://down.52pojie.cn :https://www.52pojie.cn/thread- ...

  9. Git学习笔记(集中式版本控制工具与分布式版本控制工具)

    集中式版本控制工具 集中式版本控制工具是指所有的项目版本都存储在唯一的服务器中,而团队中使用者本地只保存有最新版本.因此,当服务器宕机或故障时,服务器中文件如果损坏或缺失,使用者本地只有最新版本,因此 ...

最新文章

  1. 2022-2028年中国锂电池用聚烯烃隔膜行业市场发展调研及投资方向分析报告
  2. (hdu step 7.2.1)The Euler function(欧拉函数模板题——求phi[a]到phi[b]的和)
  3. 协同滤波模型的推荐算法(ACM暑校-案例学习)
  4. 【电子书类】C/C++电子书下载汇总
  5. IsWow64Process 判断操作系统位数
  6. NoSuchBeanDefinitionException - not resolved currently
  7. Date和Calendar
  8. cisco packet tracer实验案例-重置路由器ENABLE特权密码
  9. 【总结整理】写给非技术产品经理的技术能力要求----摘自《人人都是产品经理》...
  10. python好用的软件_新手写Python程序有什么推荐好用编辑器
  11. Centos升级GLIBC
  12. python opencv 识别圆角矩形_OpenCV—Python 轮廓检测 绘出矩形框(findContours\ boundingRect\rectangle...
  13. 多元线性回归模型的各种诊断
  14. 人工智能方向本科生如何查看论文?
  15. 广州互联网公司面试地图
  16. ddns-go搭建ddns(动态域名解析)
  17. cublas 的学习笔记_1
  18. ASO 相似测试
  19. MySQL主从架构、读写分离、集群相关面试问题
  20. MSSQL日期按星期几汇总排序

热门文章

  1. 综合知识计算机类编制,天津事业编综合知识是什么
  2. centos8.2安装mysql_为CentOS 8操作系统安装MySQL的方法,以安装MySQL 8为例
  3. python编程的基本方法有哪些_Python编程中常用的基础知识有哪些?
  4. 基于django rest framework的mock server实践
  5. 从percona server 5.7换到mariadb 10.2
  6. MySQL在Django框架下的基本操作(MySQL在Linux下配置)
  7. 【Electron】Electron开发入门(八):自定义electron框架外壳(shell)的菜单(Menu)...
  8. 查看修改MySQL字符集
  9. 内存泄漏 和 内存溢出
  10. opencl 加速 c语言程序_Win10应用获得面向OpenCL和OpenGL的兼容层