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 相关文章推荐
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
JavaScript中document.forms[0]与getElementByName区别
Jan 21 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 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
smtp邮件发送一例
2006/10/09 PHP
php下清空字符串中的HTML标签的代码
2010/09/06 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
javascript 自动填写表单的实现方法
2010/04/09 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
Python中实现参数类型检查的简单方法
2015/04/21 Python
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
python 表格打印代码实例解析
2019/10/12 Python
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
幼师求职自荐信范文
2014/01/26 职场文书
新农村建设典型材料
2014/05/31 职场文书
天地会口号
2014/06/17 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers