专栏首页蚂蚁开源社区支持animate.css动画的jquery弹出层特效

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

简要教程

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实现环形进度条

每晚不见不散

作者 | 思齐

本文分享自微信公众号 - 蚂蚁开源社区(mayi_zzfriend)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用 Whistle 作为 API 服务网关

    最近写了一款 React 的工具,能拉取团队成员 Jira 上的 Task 和 Bug,根据其 Task 的 Efforts 时长和 Bug 的修复时长,计算对...

    猫哥学前班
  • php 二维数组时间排序实现代码 转

    function arraySort($arr, $keys, $type = 'asc') {

    双面人
  • 如何使用JavaScript开发AR(增强现实)移动应用 (一)

    所谓AR(Augmented Reality), 即增强现实,是一种将通过计算机渲染出的虚拟图像与真实世界巧妙融合的手段,背后广泛运用了多媒体、三维建模、实时跟...

    Jerry Wang
  • javascript当中类型转换,typeof的用法

    1)类型转换,typeof的用法 例 3.1.1 <HTML> <head>     <meta http-equiv="content-type" con...

    马克java社区
  • 快速学会使用Vuex

    半指温柔乐
  • Stanford公开课《编译原理》学习笔记(2)递归下降法

    课程里涉及到的内容讲的还是很清楚的,但个别地方有点脱节,建议课下自己配合经典著作《Compilers-priciples, Techniques and Too...

    大史不说话
  • 4-(微信小程序篇)关于本人写的A-H教程里面mqtt.js包使用介绍

    https://www.cnblogs.com/yangfengwu/p/11624796.html

    杨奉武
  • [Next] 初见next.js

      Next.js 可与 Windows,Mac 和 Linux 一起使用.您只需要在系统上安装 Node.js 即可开始构建 Next.js 应用程序.如果有...

    用户6050340
  • 学会这几个技巧,让Redis大key问题远离你 原

    个推作为国内第三方推送市场的早期进入者,专注于为开发者提供高效稳定的推送服务,经过9年的积累和发展,服务了包括新浪、滴滴在内的数十万APP。由于我们推送业务对并...

    个推君
  • html当中如何引用js文件

    3)html当中如何引用js文件 如果需要javascript工程师和html美工各干各的工作,需要分开写文件。 例 1.2 <html> <head> ...

    马克java社区

扫码关注云+社区

领取腾讯云代金券