弹性动态响应式提示框特效代码下载

  • 971
  • 0
  • 0

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

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

  1. <link rel="stylesheet" href="dist/remodal.css">
  2. <link rel="stylesheet" href="dist/remodal-default-theme.css">
复制代码

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

  1. <script src ="dist/remodal.min.js"> </script>
复制代码

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

  1. <div class =“remodal-bg”>
  2. ...页面内容...
  3. </ DIV>
复制代码

现在创建模态对话框:

  1. <div class="remodal" data-remodal-id="modal">
  2.   <button data-remodal-action="close" class="remodal-close"></button>
  3.   <h1>Remodal</h1>
  4.   <p>
  5.     Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
  6.   </p>
  7.   <br>
  8.   <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  9.   <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
  10. </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. <div class="remodal" data-remodal-id="modal"
  2.   data-remodal-options="hashTracking: false, closeOnOutsideClick: false">
  3.   <button data-remodal-action="close" class="remodal-close"></button>
  4.   <h1>Remodal</h1>
  5.   <p>
  6.     Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
  7.   </p>
  8.   <br>
  9.   <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  10.   <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
  11. </div>
复制代码


弹性动态响应式提示框特效代码下载
  • 可乐妹 刚刚下载了一个素材
  • zhouyong 刚刚下载了一个素材
  • Enthusiasm 刚刚下载了一个素材
  • 一条大闲鱼 刚刚下载了一个素材
  • Thatgirl 刚刚下载了一个素材
  • M3GAMIND 刚刚下载了一个素材
  • 王二胖 刚刚下载了一个素材
  • 真真正正 刚刚下载了一个素材
  • 最后的一班渡轮 刚刚下载了一个素材
  • 奎空 刚刚下载了一个素材
  • 。2662 刚刚下载了一个素材
  • qqaR7 刚刚下载了一个素材
  • Augens 刚刚下载了一个素材
  • 秋叶落红人不归 刚刚下载了一个素材
  • 正信网络 刚刚下载了一个素材
分享者:
分享者头像
小编
热门素材推荐
HTML素材网,HTML5模板,网页特效 微信公众账号二维码 淘宝店铺地址二维码
Copyright©2024  素材8  Powered by 智伙伴科技
   鲁ICP备14029286号-5
返回顶部返回顶部
发布主题