舒适的全屏式的弹窗jQuery插件

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

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

120034bb52e4bd824xuw4s

 

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

1338553g21g3th2ewwgcte 1339104ecm4cnenljfwyyf 133836vyuy6dv62jy6smsx

插件兼容性

  • 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.

Leave a comment

Connect with FIBONACCI

Everyone all live in parallel with their own trouble.