支持animate.css动画的jquery弹出层特效

用户5997198

修改于 2019-10-25 03:40:32

6.7K00

代码可运行

文章被收录于专栏：蚂蚁开源社区蚂蚁开源社区

运行总次数：0

代码可运行

简要教程

jquery.popup.js是一款支持animate.css动画效果的弹出层模态窗口插件。你可以在初始化插件时，配置模态窗口打开和关闭时的CSS3，使用非常炫酷和方便。

使用方法

在页面中引入下面的文件。

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

HTML结构

<div id="myModal" class="myModal"><!-- Modal Content Here --><h3>Modal Title</h3><p>Modal Body</p><!-- Custom Close Button --><b class="myModal-close js-popup-close">x</b></div>

CSS样式

.myModal {max-width: 600px;padding: 1em;background: #eee;display: none;position: relative;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);}/*关闭按钮*/.item-close {cursor: pointer;right: 5px;top: 5px;position: absolute;background: #222;color: #fff;border-radius: 100%;font-size: 14px;height: 24px;line-height: 22px;text-align: center;width: 24px;}

初始化插

$('#elem').popup();

配置参数

$('#elem').popup({background: "#000",position: "absolute",opacity: .5,zIndex: 123456788,classAnimateShow: '',  // animate class, link https://daneden.github.io/animate.css/      classAnimateHide: '',  // animate class, link https://daneden.github.io/animate.css/      time: 400,onPopupClose: function(){},  // popup close after function      onPopupInit: function(){}  // popup init after function});