js实现点击展开隐藏效果(实例代码)


Posted in Javascript onSeptember 28, 2018

本章给大家介绍用js事件冒泡实现鼠标点击显示提示框效果(代码实例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

先看看效果图:

js实现点击展开隐藏效果(实例代码)

代码实例:

<!DOCTYPE html>
<html>
 
<head>
 <meta charset="UTF-8">
 <title>事件冒泡-提示框</title>
</head>
<style>
button {
 width: 160px;
 height: 30px;
 background-color: #ff0000;
 color: #fff;
 border: 1px solid #000;
}
#prompt{
 display: none;
 border: 1px solid #000;
 padding: 20px;
 position: fixed;
 left: 50%;
 top: 50%;
 transform: translate(-50%,-50%);
 max-width: 600px;
 min-width: 300px;
 border-radius: 6px;
 background-color: #fff;
}
 
#prompt #prompt-content h3{
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin: 0;
}
#prompt #prompt-content h3 i{
 display: inline-block;
 width: 26px;
 height: 26px;
 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');
 background-position: center center;
 background-repeat: no-repeat;
 -webkit-background-size: cover;
 background-size: cover;
}
 
#prompt #prompt-content p{
 text-align: justify;
 font-size: 16px;
}
</style>
 
<body>
 <button onclick="promptBox('prompt')">显示/隐藏 消息框</button>
 <div id="prompt">
 <div id="prompt-content">
  <h3>我是标题<i onclick="$('#prompt').hide()"></i></h3>
  <hr>
  <p>用一辈子时间去珍藏你,我不知道够不够?当我用坦荡、虔诚、真情,甚至,袒露心怀来“奋笔疾书”这样一份真爱的时候,我知道你的爱或恨已经植入我的骨髓,并刻在了心上。当真心遇到仁心的时候,我相信才会有心心相印一说。而面对一个人华丽转身的时候,所谓的真心和仁心再次相碰,溅出的那段激烈的火花,还会不会重新燃起一份爱的承诺?而我一直想用时间的长度和宽度来验证,把一个人藏在心底到底能藏多久?</p>
 </div>
 </div>
 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script>
 /**
 * [promptBox 需要点击执行显示隐藏的按钮和需要显示的内容添加停止点击冒泡事件,为document添加点击隐藏事件]
 * @param {[String]} boxId [显示/隐藏的消息提示框]
 */
 function promptBox(boxId) {
 
 // 获取Id
 var boxId = $("#" + boxId);
 
 // 显示/隐藏  
 $(boxId).toggle();
 
 // 停止点击冒泡事件
 var e = arguments.callee.caller.arguments[0] || event;
 
 if (e && e.stopPropagation) {
 
  e.stopPropagation();
 
 } else {
 
  window.event.cancelBubble = true;
 
 }
 
 // 显示/隐藏消息提示框
 $(boxId).click(function(event) {
 
  // 停止点击冒泡事件
  var e = arguments.callee.caller.arguments[0] || event;
 
  if (e && e.stopPropagation) {
 
  e.stopPropagation();
 
  } else {
 
  window.event.cancelBubble = true;
 
  }
 
 })
 
 // document点击隐藏事件,不需要清除冒泡事件
 $(document).click(function() {
 
  $(boxId).hide();
 
 })
 
 }
 </script>
</body>
 
</html>

以上就是本次JS效果的全部内容,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
深入理解node.js http模块
Jan 24 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
Vue开发Html5微信公众号的步骤
Apr 11 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 #Javascript
对vue中v-if的常见使用方法详解
Sep 28 #Javascript
总结javascript三元运算符知识点
Sep 28 #Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 #Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 #Javascript
js隐式转换的知识实例讲解
Sep 28 #Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 #Javascript
You might like
PHP伪造referer实例代码
2008/09/20 PHP
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
django实现前后台交互实例
2017/08/07 Python
Python中文件的读取和写入操作
2018/04/27 Python
Python中一般处理中文的几种方法
2019/03/06 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
python实现人机五子棋
2020/03/25 Python
解决c++调用python中文乱码问题
2020/07/29 Python
利用python进行文件操作
2020/12/04 Python
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
委托证明的格式
2014/01/10 职场文书
信息专业大学生自我评价分享
2014/01/17 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
教师新年寄语
2014/04/03 职场文书
活动策划求职信模板
2014/04/21 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
python中的3种定义类方法
2021/11/27 Python
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android