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 相关文章推荐
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
用js 让图片在 div或dl里 居中,底部对齐
Jan 21 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
Js操作Select大全(取值、设置选中等等)
Oct 29 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
jquery显示隐藏元素的实现代码
May 19 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 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
PHP5多态性与动态绑定介绍
2015/04/03 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
Python hashlib模块的使用示例
2020/10/09 Python
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
美国网上书店:Barnes & Noble
2018/08/15 全球购物
培训演讲稿范文
2014/01/12 职场文书
大学军训感言200字
2014/02/26 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
倡议书格式模板
2014/05/13 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
安全宣传标语口号
2014/06/06 职场文书
大学生见习报告总结
2014/11/04 职场文书
社区党务工作总结2015
2015/05/19 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL