jQuery对话框和模态窗口的重模版

插件说明: Remodal是一个扁平模态对话框，响应迅速，轻巧，快速且易于自定义的模式窗口插件. 使用声明性状态符号和哈希跟踪. 所有现代浏览器均支持. 您可以轻松为模态窗口定义背景容器（例如模糊效果）.

灵敏，轻便，快速，与CSS同步，完全可自定义的模态窗口插件

在标题的dist文件夹中包含CSS文件:

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

在之前的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属性传递其他选项.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-162648-1.html