当前位置：首页 > 网页特效 > 弹出层

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

分类：弹出层日期：2024-05-14 点击(5) 评论(0)

简介

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

```html
<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结构
```html
<div id="myModal" class="myModal">
  
  <h3>Modal Title</h3>
  <p>Modal Body</p>
  
  <b class="myModal-close js-popup-close">x</b>
</div>
```
#####  CSS样式
```html
.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;
}
```
#####  初始化插件
```html
$('#elem').popup();   
```              
#####  配置参数
```html
$('#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
});        
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果