jQuery+css3弹出框插件
2024-04-13 04:05:31
先来看DEMO：https://codepen.io/jonechen/pen/regjGG
插件的开发很简单，运用了CSS3的动画效果，并且弹出框的内容可以自定义。插件的默认配置参数有三个：
var defaults = {
event: 'click', // 默认点击事件
dialogBox: 'selector', // 弹出框容器
hover: false, // 默认滑动事件关闭
}
CSS部分：
*{padding: 0; margin: 0; list-style: none;font:14px/1.8 "microsoft yahei";}
body{background: #505050}
.btn{margin: 0 auto;width: 80px; }
.btn a{display:block; text-decoration: none; background: red;color: #fff; text-align: center; height: 40px;line-height: 40px; }
.box{width: 500px;height: 100px;border:1px solid #ccc;padding: 10px; display: none; }
HTML部分：
<div class="btn"><a href="#">点击我</a></div> <div class="box">
这是弹出内容
</div>
JS插件部分：
/***
by jone 2016.5.17
***/
(function($) {
$.fn.dropMenu = function(options) {
var defaults = {
event: 'click', // 默认点击事件
dialogBox: 'selector', // 弹出框容器
hover: false, // 默认滑动事件关闭
}
var obj = $.extend(defaults, options);
this.each(function() {
var me = $(this);
me.parent().css('position', 'relative');
var wrapper = '<div class=\'wrapper\'><div class=\'space\'><i></i><em></em></div></div>';
me.parent().append(wrapper);
var _box = me.parent().find('.wrapper');
obj.dialogBox.show().appendTo(_box);
_box.css({
position: 'absolute',
top: me.outerHeight() + 11,
boxShadow: '0 0 5px rgba(0,0,0,0.05)',
transition: 'all 0.15s ease-in-out 0s',
visibility: 'hidden',
transformOrigin: 'left top',
transform: 'scale(0)',
background: '#fff',
});
_box.find('.space').css({
width: '100%',
height: '11px',
position: 'absolute',
top: '-11px',
left: 0
})
var borderColor = obj.dialogBox.css('borderColor');
_box.find("i,em").css({
content: " ",
borderColor: 'transparent transparent ' + borderColor + ' transparent',
borderStyle: 'solid',
borderWidth: '11px 8px',
display: 'block',
width: 0,
height: 0,
lineHeight: 0,
fontSize: 0,
position: 'absolute',
left: me.parent().outerWidth() / 2 - 10,
top: '-10px',
})
_box.find("em").css({
borderColor: 'transparent transparent #fff transparent',
top: '-8px',
})
var parentsWidth = me.parent().parent().innerWidth()
var parentWidth = me.parent().outerWidth();
var offsetWidth = me.parent().offset().left;
if (offsetWidth >= parentsWidth - parentWidth) {
_box.css({
right: 0,
transformOrigin: 'right top',
});
console.log(_box.outerWidth());
_box.find("i,em").css({
left: _box.outerWidth() - me.parent().outerWidth() - 10 + me.parent().outerWidth() / 2
})
}
if (!obj.dialogBox || obj.dialogBox === undefined) {
throw "error:obj.dialogBox is not defind";
return
} me.on(obj.event, function() {
var display = _box.css('visibility');
if (display == 'hidden') {
_box.css({
visibility: 'visible',
transform: 'scale(1)'
})
} else {
_box.css({
visibility: 'hidden',
transform: 'scale(0)'
})
}
});
if (obj.hover == true) {
me.off(obj.event);
me.on('mouseenter', show);
me.on('mouseleave', hide);
_box.on('mouseenter', show);
_box.on('mouseleave', hide);
} function show() {
_box.css({
visibility: 'visible',
transform: 'scale(1)'
})
}; function hide() {
_box.css({
visibility: 'hidden',
transform: 'scale(0)'
})
};
});
}
})(jQuery)
插件调用方法：
// 插件调用
$(function() {
$(".btn a").dropMenu({
dialogBox: $(".box"),
})
})
插件下载：jQuery.dropMenu.js
最新文章
- ASP.NET Core应用中如何记录和查看日志
- 如何在Web引用中使用项目自定义的类
- idea-生成key的Java代码
- Runtime的几个小例子（含Demo）
- raw,cow,qcow,qcow2镜像的比较
- 电赛初探（二）——语音采集回放系统
- LCD参数解释及计算【转】
- 图的广度、深度优先遍历 C语言
- P问题、NP问题、NPC问题
- zabbix 问题汇总
- 【Python】 字符串的相关小知识点
- js 函数 作用域 全局作用域 局部作用域 闭包
- centos7虚拟机设置静态ip
- 本机是wifi，虚拟机无法连接外网问题
- vue — 安装并创建vue项目
- 【原创】Mysql中select的正确姿势
- php RSA非对称加密 的实现
- postgresql ltree类型
- Confluence 6 空间
- MySQL_插入更新 ON DUPLICATE KEY UPDATE