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