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实现table单元格点击展开隐藏效果(实例代码)
如果table元素的高如果不设置,是根据内容撑开的,根据这个规则,可以用js控制默认状态下table-cell的宽度,并将这一列的table-cell设置为dispaly:block,这样多出来的内容就会被隐藏掉,添加点击事件,把table-cell的display在block和table-cell之间切换,就能实现点击展开隐藏效果啦! js代码如下: $('.cell').click(function(){ if($(this).css('display')=='block'){ consol
-
用javascript 控制表格行的展开和隐藏的代码
无标题文档 function $(obj) { return document.getElementById(obj); } function close_open() { if($("myTr").currentStyle.display == "none") { $("myTr").style.display = ""; } else { $("myTr").style.display = "
-
JS点击链接后慢慢展开隐藏着图片的方法
本文实例讲述了JS点击链接后慢慢展开隐藏着图片的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>JS点击链接后,慢慢展开隐藏着的图片</title> <body> <script language="JavaScript"> var b=0; var c=true; function fade(){ if(document.all); if(c == true){b+=3} i
-
基于JavaScript实现评论框展开和隐藏功能
1.效果图如下所示, 点击评论会在对应的评论区域展开评论输入框,点击取消会取消对应的评论输入框 2.html代码:需要引入jQuery.js <div class="nr-comment"> <div class="nr-comment-con"> <div class="nr-comment-nav"> <div class="comment-number"> <span
-
JS实现鼠标点击展开或隐藏表格行的方法
本文实例讲述了JS实现鼠标点击展开或隐藏表格行的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm
-
js实现点击展开隐藏效果（实例代码）
本章给大家介绍用js事件冒泡实现鼠标点击显示提示框效果(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 先看看效果图: 代码实例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件冒泡-提示框</title> </head> <style> button { width: 160px; h
-
js鼠标点击图片切换效果实现代码
本文实例讲述了js鼠标点击图片切换效果实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: html代码: <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:
-
js拖动滑块和点击水波纹效果实例代码
拖动滑块效果: 先看看效果图: <!doctype html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <t
-
原生JS实现手动轮播图效果实例代码
手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等... 轮播图主要用于展现图片,新出商品,词条,又能美观网页.給网页中增加动态效果. 手动轮播,是小编认为最简单的一种轮播方式,既能左右翻页,还能通过悬浮按钮,快速预览图片,所以今天就给大家写一个原生js手动轮播图. 一,利用JavaScript制作手动轮播图,首先排版. 引入默认样式表(可以手写): <link rel="stylesheet" href="css/Default st
-
js图片向右一张张滚动效果实例代码
先来张效果图 样式 复制代码 代码如下: #div_left{float:left;width:60px;height:86px;} #starScroll{width:843px;height:188px;margin-left:15px;margin-right:15px;padding-top:9px;overflow:hidden;border:1px solid red;float:left;} #starScroll #contentScroll{widt
-
js实现单行文本向上滚动效果实例代码
复制代码 代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, autoStart) { this.Delay = 10; this.LineHeight = 20; this.Amount = 1; this.Direction = "up"; this.Timeout = 1500; this.Scrol
-
简单纯js实现点击切换TAB标签实例
一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果 使用方法: 1.将附件中的index.html中的css样式以及代码部分拷贝到你需要的地方即可 相关链接:几行简单的jQuery代码搞定tab标签切换效果 展示效果图: 效果展示 源码下载 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &
-
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的 很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 turn.js 如何使用!!!!!!! 文章最后提供源码下载,结合源码看本文,turn.js更简单! 首先附上个人的文件路径 对于css 和 js文件不需要过多的解释 在这里要注意的是pages文件夹 这里个文件夹下放的是需要预览的图片文件
-
js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不断切换效果. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js鼠标点击图片切换效果代码如下 <hea