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

用户5997198

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

6.3K0

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

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

简要教程

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});

该支持animate.css动画的jquery弹出层插件的github网址为：https://github.com/romamaslennikov/jquery.popup.js

推荐阅读：

【公共UI】纯CSS3 Material Design风格单选框和复选框

纯CSS3彩色进度条动画开发源码

CSS3 animation属性实现地球转动

【程序员装B系列】八种CSS3按钮动画特效

【前端小技巧】CSS3实现环形进度条

每晚不见不散

作者 | 思齐

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-10-22，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery