jQuery对话框、模态窗插件Remodal

所属分类：UI-对话框,弹出层

40463 355 查看评论 (16)

分享到微信朋友圈

查看演示立即下载

插件描述：Remodal 是一个扁平化，响应式，轻量，快速，容易定制的模态窗口插件。使用声明式状态符号和哈希（Hash）跟踪。所有现代的浏览器都支持。您可以轻松地定义为模态窗口定义背景容器（如模糊效果）。

Remodal

响应，轻巧，快速，与CSS动画同步，完全可定制的模态窗口插件

使用方法

在头部分包含dist文件夹中的CSS文件：

<link rel="stylesheet" href="dist/remodal.css">
<link rel="stylesheet" href="dist/remodal-default-theme.css">

在</ body>之前的dist文件夹中包含JS文件：

<script src ="dist/remodal.min.js"> </script>

您可以为模态定义背景容器（如模糊效果）。它可以是任何简单的内容包装器：

<div class =“remodal-bg”>
...页面内容...
</ DIV>

现在创建模态对话框：

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

所以，现在你可以用哈希函数调用它：

<a href="#modal">Call the modal with data-remodal-id="modal"</a>

或：

<a data-remodal-target="modal">Call the modal with data-remodal-id="modal"</a>

选项

您可以使用data-remodal-options属性传递其他选项。

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

基于jQuery的简单分页

简单的jquery进度条插件LineProgressbar.js