舒适的全屏式的弹窗jQuery插件
插件的min版只有2KB大小,对于普通站来这不算什么了,下面一起看看该弹窗代码的DEMO效果,真很好看,扁平化的风格设计。
插件兼容性
- IE10+
- Chrome
- Firefox
- Safari
- Opera
使用教程
STEP1: 在<head>内引入animate.css样式库
<head>
<link rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css”>
</head>
STEP2: HTML代码:在<body>内加入以下代码
<body>
<!–Call your modal–>
<a id=”demo01″ href=”#animatedModal”>DEMO01</a>
<!–DEMO01–>
<div id=”animatedModal”>
<!–THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID class=”close-animatedModal” –>
<div class=”close-animatedModal”>
CLOSE MODAL
</div>
<div class=”modal-content”>
<!–Your modal content goes here–>
</div>
</div>
</body>
STEP3: 嵌入jQuery库和插件JS,注意必须在你的HTML内容底部。
<body>
<!–你的HTML内容–>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”yourPath/animatedModal.min.js”></script>
</body>
STEP4: 初始化
<script>
$(“#demo01”).animatedModal();
</script>
提示:下载的DMEO页面如果看不到效果,请检查的你浏览器,还有就是jQuery库的嵌入地址加上http:
插件名称:animatedModal.js
Trackback from your site.