图片/图形

支持 Animate 动画的jQuery弹出层插件

也想出现在这里?联系我们
面包多

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

使用方法

在页面中引入下面的文件

也想出现在这里?联系我们
创客主机
  1. <link href="css/animate.css" rel="stylesheet"/>
  2. <script src="js/jquery.min.js" type="text/javascript"></script>
  3. <script src="js/jquery.popup.js"></script>

HTML 结构

  1. <div id="myModal" class="myModal">
  2.   <!-- Modal Content Here -->
  3.   <h3>Modal Title</h3>
  4.   <p>Modal Body</p>
  5.   <!-- Custom Close Button -->
  6.   <b class="myModal-close js-popup-close">x</b>
  7. </div>

CSS 样式

  1. .myModal {
  2.   max-width: 600px;
  3.   padding: 1em;
  4.   background: #eee;
  5.   display: none;
  6.   position: relative;
  7.   box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
  8. }
  9. /*关闭按钮*/
  10. .item-close {
  11.   cursor: pointer;
  12.   right: 5px;
  13.   top: 5px;
  14.   position: absolute;
  15.   background: #222;
  16.   color: #fff;
  17.   border-radius: 100%;
  18.   font-size: 14px;
  19.   height: 24px;
  20.   line-height: 22px;
  21.   text-align: center;
  22.   width: 24px;
  23. }

初始化插件

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

配置参数

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

Github 网址:https://github.com/romamaslennikov/jquery.popup.js

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Supro - 极简电商网站模板WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!