消息提示框-事件冒泡
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>事件冒泡-提示框</title>
7 </head>
8 <style>
9 button { 10 width: 160px;
11 height: 30px;
12 background-color: #ff0000;
13 color: #fff;
14 border: 1px solid #000;
15 }
16 #prompt{ 17 display: none;
18 border: 1px solid #000;
19 padding: 20px;
20 position: fixed;
21 left: 50%;
22 top: 50%;
23 transform: translate(-50%,-50%);
24 max-width: 600px;
25 min-width: 300px;
26 border-radius: 6px;
27 background-color: #fff;
28 }
29
30 #prompt #prompt-content h3{ 31 display: flex;
32 justify-content: space-between;
33 align-items: center;
34 margin: 0;
35 }
36 #prompt #prompt-content h3 i{ 37 display: inline-block;
38 width: 26px;
39 height: 26px;
40 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADQklEQVRYR7WXWahPURTGf9ccZXpAUu4DkQdFxhKRMSKz0M0YQsiDojwYIykPcuNmzjw9ECFDyiwiU1GEQskcMvZd63Ace599Dveul3//vdZe33f2XtMu4KfUB/YBx4ClwCdbL6 fbsBp4GsB0MKAGxraA2A8cKIc0JsDK4C wBSgWAS0MNsBth2YDLwpAyI1gCXAVKCi XsIFIqAZAKwGqiSAHsCDAPO/geJrsBmoFHMx11gMHAzIiBdB2A/0CAB9g1YDCwAvuQgUhNYBYxJ7FkLzAA aj1OQP/rAUeAVg6gK8BA4FEGEoUWV01itt BScC6 P4kAemqATuAAQ6g1/ZFB1JIdLGTrBOz QyMsEz7Y6uLQGSwCJjnAVoOzHHoFEvFsUCTyTugP3DS5SuNgOzHASWOq5JuvQWvjlZ RHhuAuQZoJy/5TuxEAHtG2VRXMHhZLddyRZgUEIv0J6AMskrWQho81BgG1DJ4ekVUDuxfgHoBShmUiUrATnRPapcR4XE5/gq0NnuPoT/VxqGNgyxDPGRELgKT/DLI6A8JxDtUS4r0l1yEVAalhaZLJKXgGqE0klV0ycqZGo2qqBByUNAfeIQ0D3oFVRudVJByUqgsoH3CHr8bbAQmB yz0IgDXyWZYcCzyXTrMt6eWQhsMdaZ9LJBquU6nqXgaYOFMVBb2tMThIhAuoFKrFJ0ejWRyOVKdT1lAHxBhTteQ 0BW67GKQRGAlsdfSBO0B7x6TU0TKkqgPosZF4mtT5CPgKznOgTcpMUARs8lz4dUvfD3G9i0Br4Dyg4IuLjruT6dKCe5f1DpeNdMPTCNQFbgDRhBy31eC6MpRWgIJSX9vYYzvRWnypOn4C1YFTdlfJvceBPDVAMaJB1tXC9eZQ2p6LE1CVO gBeWFvB91/HvFlkHy8tA 9rxNQj99rBcUFoMDSwJFX5FsnqtbskntAOxnJ WiPkRqL8v1fRU8 vQFqeRxMF4GWwGFH4KmANAuNVBmYjbX5MW6q94WeZiVREIrpUSMTGc60h0UGjKDJJasfMnxr7fqMKwt2Av2Aa4DqgSbeshANKYoHFSHNiqXgSQL6r7RZZk9nZUVZyhpgI6CB9Zf8AAbklp4kaj9vAAAAAElFTkSuQmCC');
41 background-position: center center;
42 background-repeat: no-repeat;
43 -webkit-background-size: cover;
44 background-size: cover;
45 }
46
47 #prompt #prompt-content p{ 48 text-align: justify;
49 font-size: 16px;
50 }
51 </style>
52
53 <body>
54 <button onclick="promptBox('prompt')">显示/隐藏 消息框</button>
55 <div id="prompt">
56 <div id="prompt-content">
57 <h3>我是标题<i onclick="$('#prompt').hide()"></i></h3>
58 <hr>
59 <p>用一辈子时间去珍藏你,我不知道够不够?当我用坦荡、虔诚、真情,甚至,袒露心怀来“奋笔疾书”这样一份真爱的时候,我知道你的爱或恨已经植入我的骨髓,并刻在了心上。当真心遇到仁心的时候,我相信才会有心心相印一说。而面对一个人华丽转身的时候,所谓的真心和仁心再次相碰,溅出的那段激烈的火花,还会不会重新燃起一份爱的承诺?而我一直想用时间的长度和宽度来验证,把一个人藏在心底到底能藏多久?</p>
60 </div>
61 </div>
62 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
63 <script>
64 /**
65 * [promptBox 需要点击执行显示隐藏的按钮和需要显示的内容添加停止点击冒泡事件,为document添加点击隐藏事件]
66 * @param {[String]} boxId [显示/隐藏的消息提示框]
67 */
68 function promptBox(boxId) {
69
70 // 获取Id
71 var boxId = $("#" boxId);
72
73 // 显示/隐藏
74 $(boxId).toggle();
75
76 // 停止点击冒泡事件
77 var e = arguments.callee.caller.arguments[0] || event;
78
79 if (e && e.stopPropagation) {
80
81 e.stopPropagation();
82
83 } else {
84
85 window.event.cancelBubble = true;
86
87 }
88
89 // 显示/隐藏消息提示框
90 $(boxId).click(function(event) {
91
92 // 停止点击冒泡事件
93 var e = arguments.callee.caller.arguments[0] || event;
94
95 if (e && e.stopPropagation) {
96
97 e.stopPropagation();
98
99 } else {
100
101 window.event.cancelBubble = true;
102
103 }
104
105 })
106
107 // document点击隐藏事件,不需要清除冒泡事件
108 $(document).click(function() {
109
110 $(boxId).hide();
111
112 })
113
114 }
115 </script>
116 </body>
117
118 </html>
更多专业前端知识,请上 【猿2048】www.mk2048.com
消息提示框-事件冒泡相关推荐
- JS:原生JS实现message消息提示框
简介 学习了一下如何使用原生JS(加上class类)实现message消息提示框的封装(繁琐版). 使用到的主要技术点:class类,JS. 功能点 1.四种提示状态(message success ...
- Android消息提示框及CheckBox组件
目录 一.Toast(消息提示框) 1.创建显示普通文本的Toast 2.创建显示带图片的Toast 二.CheckBox组件 1.在CheckBox在XML文件中的基本语法 2.CheckBox 选 ...
- QGC注释消息提示框
消息提示框:有时显示时覆盖想要看的界面,可注释!
- JS的三种消息提示框alert confirm prompt
首先来看看alert的效果: 代码为: $(function(){$("#quit").click(quit); })function quit(){alert("消息提 ...
- flutter Toast消息提示框
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 本文章将讲述: 1.在 flutter 跨平台开发中,使用 Dart 实现 Toast 消息提示框效果 2.Overl ...
- window.createPopup()用法以及短消息提示框代码
一.在做一个portal项目时,用户要求在门户首页上的待办信息要有明确的提示,且在浏览器最小化的情况下,当有新的待办信息时,也要做提示.用了alert方法.或者用div的方法都很难实现"在浏 ...
- html如何设置提示收到消息,从零开始实现一个消息提示框
引言 消息提示框在实际应用场景当中比较常见,最常用的就是element ui的消息提示框,我们通常都是直接使用它们,但是我们有没有尝试过去探究其实现原理,并自己动手实现呢?为了提升我们的个人能力和竞争 ...
- unity 弹窗提示_【原创】Unity3D 消息提示框
本文永久地址:http://www.omuying.com/article/60.aspx,[文章转载请注明出处!] 消息提示框,大家都并不陌生,他们的主要作用是给予用户提示,用 NGUI 来做消息提 ...
- uniapp 消息提示框
uni.showToast(OBJECT) 显示消息提示框. OBJECT参数说明 参数 类型 必填 说明 平台差异说明 title String 是 提示的内容,长度与 icon 取值有关. i ...
最新文章
- 锁定计算机的事件日志,关闭并重新启动计算机后意外地在系统事件日志中记录了事件 ID 6008...
- css样式之background详解(格子效果)
- Spring(四)Bean注入方试
- 论文浅尝 | 用于低资源条件下知识图谱补全的关系对抗网络
- 怎样修改当前分支最新一次提交的message信息?
- 利用计算机测地震是计算机的什么,计算机在气象预报、地震探测、导弹卫星轨迹等方面的应用都属于( )...
- Linux文件属性与管理
- leetcode python3 简单题190. Reverse Bits
- Javascript 权威指南第五版 手记(2) 变量的作用域
- hdu 3065 病毒侵袭持续中
- 金士顿优盘不被电脑识别的小技巧
- ubuntu配置IP并且生效
- mysql 查看 脏页_MySQL:刷脏页
- 机器学习基础--math(20)--流形/黎曼流形
- 响应式布局——视口viewport和常用单位
- 每周工作总结-记录总结自己遇到问题及学习内容,及时分析,找到不足,让自己不断进步
- Paper系列的查重和知网维普的查重对比
- Laravel本地Sail开发环境下Phpstorm+浏览器+Postman调试配置
- QT的QTreeWidget节点触发事件(一)
- Windows 故障恢复控制台应用详解
热门文章
- Windows编程之使用外部动态链接库——纸牌
- mysql 过滤相同数据库_MySQL数据库查询中的重复记录过滤
- ffmpeg 缩放算法_图像尺寸调整算法介绍并手动实现近邻算法
- es6中的类及es5类的实现
- 20165234 《Java程序设计》第五周学习总结
- MapReduce 详解
- TCP Congestion Control
- [转]C#操作XML方法详解
- 收藏网站制作常用经典css.div.布局.设计实例打包下载(下方有其他链接)
- 利用ASP.NET向服务器上传文件[转]