jQuery弹出层插件支持animate.css

 查看演示  website  立即下载

jQuery.popup.js

适用于您的应用程序的模态和弹出窗口。 支持animate.css。

使用方法

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

<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(){},  // 功能后弹出窗口关闭
      onPopupInit: function(){}  // 函数后弹出 init
});

PREVIOUS:
NEXT:
jQuery bootstrap4消息插件bootstrap4.pop
基于jQuery Bootstrap4的消息提示插件Toast.js