支持animate.css动画的jquery弹出层插件

当前位置:主页 > jQuery库 > Lightbox和对话框 > 支持animate.css动画的jquery弹出层插件
支持animate.css动画的jquery弹出层插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2019-10-21
    阅读:
简要教程

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