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群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。
«
»

{ 發表評論 }