jQuery对话框、模态窗插件Remodal

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

 41192  354  查看评论 (16)
分享到微信朋友圈
X
jQuery对话框、模态窗插件Remodal ie兼容8

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>
相关插件-对话框,弹出层

讨论这个项目(16)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    CarnivalMask 0
    2019/1/14 18:14:46
    模态框不能设置样式和位置吗? 回复
    平凡之路 0
    2018/4/1 19:14:40
    我想在百度地图marker 调用此函数如何调用 回复
    1993 0
    2017/10/18 11:40:17
    如果要做多个删除怎么在OK按钮上做删除事件呢 回复
    像空气丶像大地 0
    2017/8/16 9:23:14
    很不错,支持一下
         Qitain 0
        2017/9/6 15:35:35
        支持
    回复
    JM’У尐文 0
    2017/8/7 16:24:55

    为什么加载出来的自己模糊呢,打开f12一下就好了

    回复
    xxxlance 0
    2017/7/25 15:56:19
    归零 0
    2017/7/24 16:57:43

    点击遮罩层会关闭模态框怎么解决啊?

        归零0
        2017/7/24 17:07:29

        已解决

        万商维盟-王伟0
        2017/10/17 9:32:56

        怎么解决的?

    回复
    zhang_js521 0
    2017/7/17 9:20:16

    正是我需要的,在ipad上面开发HTML5使用

    回复
    wudiilong 0
    2017/7/13 15:11:21
    _送了流年丶 0
    2017/7/13 9:40:03
    不错的控件  作者加油 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复