带磨砂玻璃效果的jQuery弹出层插件

jquery.popuplayer是一款带磨砂玻璃效果的jQuery弹出层插件。该插件可以方便的从不同的方向弹出自定义的弹出层，并且背景会带有非常炫酷的磨砂玻璃效果。

在浏览器中CSS3的性能比jquery动画的性能要好一点，但是在移动端还是有明显的卡顿。jquery毕竟不是专门的动画库，而css3则强制使用GPU进行加速，但这样又会是浏览器一直处于高负荷状态，从而产生卡顿。 所以这里采用了velocity.js这样的原生JavaScript动画库来处理动画。

使用方法

在页面中引入jquery.popuplayer.min.css和jquery、jquery.popuplayer.min.js文件。

<link href="css/jquery.popuplayer.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.popuplayer.min.js"></script>         
                

初始化插件

可以通过PopupLayer()方法来触发弹出层。

$('element').PopupLayer();
                

配置参数

jquery.popuplayer插件的可用配置参数有：

$('element').PopupLayer({
    content: "", // 内容，可以传入纯文本或类名或html
    target: "body", // 把弹出层添加到的目标节点
    to: "top",   // 向哪个方向展开
    screenRatio: 0.3, // 占屏幕百分比
    heightOrWidth: 300, // 当且仅当screenRatio为0时生效
    blur: false, // 是否开启毛玻璃效果
    speed: 200,  // 动画速度
    color: "#000", // 文本颜色
    backgroundColor: "#fff", // 背景颜色
    contentToggle: false, // 点击content是否关闭弹出层
    closeBtn: null,  // 指定关闭按钮
    openCallback: null, // 展开的回调
    closeCallback: null // 关闭的回调
});
                

• content：内容，可以传入纯文本或类名或html。
• target：把弹出层添加到的目标节点。
• to：向哪个方向展开。
• screenRatio：占屏幕百分比。
• heightOrWidth：当且仅当screenRatio为0时生效。
• blur：是否开启毛玻璃效果。
• speed：动画速度。
• color：文本颜色。
• backgroundColor：背景颜色。
• contentToggle：点击content是否关闭弹出层。
• closeBtn：指定关闭按钮。
• openCallback：展开的回调。
• closeCallback：关闭的回调。

jquery.popuplayer弹出层插件的github地址为：https://github.com/edwardnevermind/jquery.popuplayer