插件描述：Remodal 是一个扁平化，响应式，轻量，快速，容易定制的模态窗口插件。使用声明式状态符号和哈希（Hash）跟踪。所有现代的浏览器都支持。您可以轻松地定义为模态窗口定义背景容器（如模糊效果）。
Remodal
响应，轻巧，快速，与CSS动画同步，完全可定制的模态窗口插件
使用方法
在头部分包含dist文件夹中的CSS文件：
1 2 | <link rel="stylesheet" href="dist/remodal.css"><link rel="stylesheet" href="dist/remodal-default-theme.css"> |
在</ body>之前的dist文件夹中包含JS文件：
1 | <script src ="dist/remodal.min.js"> </script> |
您可以为模态定义背景容器（如模糊效果）。它可以是任何简单的内容包装器：
1 2 3 | <div class =“remodal-bg”>...页面内容...</ DIV> |
现在创建模态对话框：
1 2 3 4 5 6 7 8 9 10 | <div class="remodal" data-remodal-id="modal"> <button data-remodal-action="close" class="remodal-close"></button> <h1>Remodal</h1> <p> Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking. </p> <br> <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button> <button data-remodal-action="confirm" class="remodal-confirm">OK</button></div> |
不要使用ID属性，如果你想避免锚跳，用data-remodal-id.
所以，现在你可以用哈希函数调用它：
1 | <a href="#modal">Call the modal with data-remodal-id="modal"</a> |
或：
1 | <a data-remodal-target="modal">Call the modal with data-remodal-id="modal"</a> |
选项
您可以使用data-remodal-options属性传递其他选项。
1 2 3 4 5 6 7 8 9 10 11 | <div class="remodal" data-remodal-id="modal" data-remodal-options="hashTracking: false, closeOnOutsideClick: false"> <button data-remodal-action="close" class="remodal-close"></button> <h1>Remodal</h1> <p> Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking. </p> <br> <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button> <button data-remodal-action="confirm" class="remodal-confirm">OK</button></div> |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 简单的jquery进度条插件LineProgressbar.js
- 下一个特效： 基于jQuery的简单分页