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

作者：管理员

发布时间：2020/2/26 17:12:34

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=899

　　简要教程

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

　　使用方法

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

　　<linkhref="css/animate.css"rel="stylesheet"/>

　　<scriptsrc="js/jquery.min.js"type="text/javascript"></script>

　　<scriptsrc="js/jquery.popup.js"></script>

　　HTML结构

　　<divid="myModal"class="myModal">

　　<!--ModalContentHere-->

　　<h3>ModalTitle</h3>

　　<p>ModalBody</p>

　　<!--CustomCloseButton-->

　　<bclass="myModal-closejs-popup-close">x</b>

　　</div>

　　CSS样式

　　.myModal{

　　max-width:600px;

　　padding:1em;

　　background:#eee;

　　display:none;

　　position:relative;

　　box-shadow:0px0px15px0pxrgba(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:'',//animateclass,linkhttps://daneden.github.io/animate.css/

　　classAnimateHide:'',//animateclass,linkhttps://daneden.github.io/animate.css/

　　time:400,

　　onPopupClose:function(){},//popupcloseafterfunction

　　onPopupInit:function(){}//popupinitafterfunction

　　});

关键字：jQuery