jQuery+css3弹出框插件

先来看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