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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
使用AOP改善javascript代码
May 01 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
js读取并解析JSON类型数据的方法
Nov 14 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
js中Generator函数的深入讲解
Apr 07 Javascript
用Node写一条配置环境的指令
Nov 14 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
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
javaScript实现滚动新闻的方法
2015/07/30 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
vue实现带复选框的树形菜单
2019/05/27 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
Python中map和列表推导效率比较实例分析
2015/06/17 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
python实现五子棋人机对战游戏
2020/03/25 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
python读文件的步骤
2019/10/08 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
python代码中怎么换行
2020/06/17 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
迟到检讨书400字
2014/01/13 职场文书
一年级数学教学反思
2014/02/01 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
会计专业自荐信范文
2015/03/05 职场文书
大学学生会辞职信
2015/05/13 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书
中学教师教学工作总结
2015/08/13 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL