jQuery实现简单弹出框效果实例
更新时间：2023年06月30日 10:51:19 作者：zhengvipin
这篇文章主要给大家介绍了关于jQuery实现简单弹出框效果的相关资料,几天一直在研究JQuery,确实很好用,有很多需求都是要弹出框,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
功能点
1、点击“更多”出现弹出框
2、点击下拉列表触发回调
3、点击空白区域收起弹出框
效果演示
PS：鼠标右键效果图`另存为`到本地 ，再将图片后缀gif改为rar即可得到完整代码压缩包。
实现思路
1、提前声明弹出标识做判断；
2、通过jQuery的has()、is()或其他类似方法判断点击的是弹出层以外的空白区域。
PS：太久不写jQuery了，很生疏了...
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popover of Jquery</title>
<link rel="stylesheet" href="./index.css" rel="external nofollow" >
</head>
<body>
<div class="container">
<!-- 弹出框html START -->
<span class="popover-wrapper">
<button class="reference" type="button">更多</button>
<div class="popover">
<input class="search" type="text" placeholder="搜索...">
<ul class="unstyled list">
<li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >示例选项1</a></li>
<li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >示例选项2</a></li>
<li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >示例选项3</a></li>
<li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >示例选项4</a></li>
<li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >示例选项5</a></li>
</ul>
</div>
</span>
<!-- 弹出框html END -->
<div class="logs"></div>
</div>
</body>
<script src="http://9i0i.com/pic.php?p=https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="http://9i0i.com/pic.php?p=./index.js"></script>
</html>JS
//Popover plugin
(function ($) {
//默认参数
var defaults = {
//触发器
reference: '.reference',
//弹出层
popover: '.popover',
//下拉列表
dropdown: '.popover > .list',
//回调函数
callback: function () { }
};
/**
* 构造函数
* @param options 参数
* @constructor
*/
function Plugin(options) {
this.options = $.extend({}, defaults, options || {});
this.$reference = $(this.options.reference);
if (!this.$reference.length) {
return;
}
this.$popover = $(this.options.popover);
if (!this.$popover.length) {
return;
}
this.render();
}
Plugin.prototype = {
/**
* 渲染主方法
*/
render: function () {
this.$dropdown = $(this.options.dropdown);
//标识声明
this.popoverShow = false;
//事件绑定
this.bindEvent();
},
/**
* 绑定事件
*/
bindEvent: function () {
this.bindPopoverShow();
this.bindPopoverHide();
this.bindDropdownClick();
},
bindPopoverShow: function () {
var that = this;
that.$reference.bind('click', function (e) {
if (that.popoverShow) {
that.$popover.fadeOut();
that.popoverShow = false;
} else {
that.$popover.fadeIn();
that.popoverShow = true;
}
//阻止冒泡，避免弹出时触发document点击
e.stopPropagation();
})
},
bindPopoverHide: function () {
var that = this;
$(document).bind("click", function (e) {
if (that.popoverShow) {
if (
!that.$popover.is(e.target) &&
that.$popover.has(e.target).length === 0
) {
that.$popover.fadeOut();
that.popoverShow = false;
}
}
});
},
bindDropdownClick: function () {
var that = this;
that.$dropdown.children().bind('click', function (e) {
//关闭悬浮框
that.$popover.fadeOut();
that.popoverShow = false;
//执行回调
(typeof that.options.callback === 'function') &&
that.options.callback.call(this, "");
})
}
};
window.Popover = Plugin;
})(jQuery);
/**
* 渲染入口
* @param options
* @returns {Plugin}
*/
new Popover({
//触发器
reference: '.reference',
//弹出层
popover: '.popover',
//下拉列表
dropdown: '.popover > .list',
//回调函数
callback: function () {
$('.logs').append('<p>【' + $(this).text() + '】被选中了...</p>');
}
});CSS
button {
background-color: #eee;
font-weight: 300;
font-size: 16px;
font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
text-decoration: none;
text-align: center;
line-height: 28px;
height: 28px;
padding: 0 16px;
margin: 0;
display: inline-block;
appearance: none;
cursor: pointer;
border: none;
box-sizing: border-box;
transition: all .3s;
}
button:focus,
button:hover {
background-color: #f6f6f6;
text-decoration: none;
outline: 0;
}
button:active {
text-shadow: 0 1px 0 rgb(255 255 255 / 30%);
text-decoration: none;
background-color: #eee;
border-color: #cfcfcf;
color: #999;
transition-duration: 0s;
box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
}
ul.unstyled {
padding: 0;
margin: 0;
list-style: none;
}
ul.unstyled>li {
list-style-type: none;
}
.popover-wrapper {
position: relative;
}
.popover-wrapper .popover {
padding: 8px;
border: 1px solid #ebeef5;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
width: 150px;
position: absolute;
right: 0;
top: 28px;
margin-top: 4px;
display: none;
}
.popover-wrapper .popover .search {
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 28px;
line-height: 28px;
outline: none;
padding: 0 15px;
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
width: 100%;
}
.popover-wrapper .popover .list {
margin-top: 4px;
}
.popover-wrapper .popover .list li a {
display: block;
padding: 4px 8px;
text-decoration: none;
color: #000;
transition: all .3s;
}
.popover-wrapper .popover .list li a:hover,
.popover-wrapper .popover .list li a:focus {
background: rgba(39, 174, 96, 0.2);
}
.popover-wrapper .popover .list li a:active {
background: rgba(39, 174, 96, 0.8);
}
.logs {
display: inline-block;
vertical-align: text-top;
width: 400px;
padding: 8px;
border: 1px solid;
height: 400px;
overflow: auto;
margin-left: 16px;
}
.logs>p {
margin: 0 0 8px;
}
.container {
height: 600px;
width: 600px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}总结
到此这篇关于jQuery实现简单弹出框效果的文章就介绍到这了,更多相关jQuery实现弹出框内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！
相关文章
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少，所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢2011-12-12
兼容BackCompat,CSS1Compat两模式渲染的页面,测试的浏览器 :friefox ie678 chrome opera2011-02-02
jquery.combobox中文api和例子，修复了上面的小bug
关于jquery.combobox，这个jquery的插件从官网上直接下载下来使用还有bug，以下是我对其api做的简单翻译，而且修复了上面的bug。2011-03-03
解决jQuery uploadify在非IE核心浏览器下无法上传
之前上传了一个通过Flash实现多文件上传，但是在IE正常运行，FireFox 不能正常上传。经过反复研究学习，之所以firefox和360浏览器无法正常运行，是因为FireFox、chrome、360浏览器等支持HTML5的浏览器不会再文件上传时自动带入session信息和cookie，不共享session。2015-08-08
这篇文章介绍了jQuery操作文本的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
全面解析jQuery $(document).ready()和JavaScript onload事件
这篇文章主要介绍了全面解析jQuery $(document).ready()和JavaScript onload事件的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
用户登录是许多网站必备的功能。有一种方式就是不管在网站的哪个页面，点击登录按钮就会弹出一个遮罩层，显示用户登录的对话框。本文将推荐一个带二维码的登录弹出层，可拖动、关闭，有需要的朋友可以参考一下。2016-12-12
在网站前端中使用jQuery库已经变得越来越流行，前端开发人员发布或撰写的相关的插件和教程也与日俱增。2010-03-03
百度搜索自动联想提示效果，想必大家都有见到过吧，下面本文也为大家也是一个高仿的类似效果2014-05-05
我们一般都是用HTML表格来显示结构化数据，如今有很多的 jQuery 表格插件可以帮助我们更好的组织和控制表格数据，增强表格的功能和操作。今天要与大家分享的是18个非常优秀的 jQuery 表格插件，有用到朋友可以参考一下。2011-04-04
最新评论