响应，轻巧，快速，与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>
|
