舒适的全屏式的弹窗jQuery插件 – animatedModal.js
赞助商链接 
animatedModal.js 是一个全屏式的弹窗jQuery插件，而且弹出效果很漂亮，全屏的弹窗特别适用于移动手机网站，所以做响应式网页的设计师们可以尝试使用这款插件。
animatedModal.js 的弹出动画可以结合 animate.css 这个样式库来实现漂亮酷弦的动画特效。
插件的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
下载 & 演示： http://joaopereirawd.github.io/animatedModal.js/
下载地址2：微盘下载
交流：UI设计交流群：133654942（ 快速加入 ），与500名设计师交流设计，分享素材。
建议：看到好的文章或素材，记得分享到微博等媒体，让更多的朋友知道，也方便日后查阅。
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
