HTML & CSS » 舒适的全屏式的弹窗jQuery插件 – animatedModal.js

舒适的全屏式的弹窗jQuery插件 – animatedModal.js

发表于: HTML & CSS. 评论
Sponsor

animatedModal.js 是一个全屏式的弹窗jQuery插件，而且弹出效果很漂亮，全屏的弹窗特别适用于移动手机网站，所以做响应式网页的设计师们可以尝试使用这款插件。

animatedModal.js 的弹出动画可以结合 animate.css 这个样式库来实现漂亮酷弦的动画特效。

animated-modal-jquery-plugin

插件的min版只有2KB大小，对于普通站来这不算什么了，下面一起看看该弹窗代码的DEMO效果，真很好看，扁平化的风格设计。

animated-modal-demo

 

animated-modal-demo-2

 

animated-modal-demo-3

插件兼容性

  • 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：微盘下载
推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。
赞助商链接

与 、 相关的文章

赞助商链接
设计达人微信交流社区：shejidaren888
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
«
»

{ 发表评论 }