素材牛VIP会员

带动画效果的JS模态对话框插件rmodal.js

 所属分类:网页特效-对话框/灯箱/提示,悬浮层/弹出层

 浏览:855次  评论:0次  更新时间:2018-12-06
牛币素材VIP可免积分下载
带动画效果的JS模态对话框插件rmodal.js兼容IE9
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:rmodal.js是一款带动画效果的js模态对话框插件。rmodal.js模态对话框插件压缩版本仅1.2kb,没有任何外部依赖,可以制作出带动画特效的模态对话框效果。它的特点还有: 使用简单,执行效率高。 纯js编写,没有任何外部依赖。 支持包括IE9+的所有现代浏览器。 可以和bootstrap和animate.css结合使用。 支持CommonJS AMD 或 globals。

详细介绍

安装方法:

可以通过npm或bower来安装rmodal.js插件。

npm install rmodal --save
bower install rmodal --save

使用方法:

在页面中引入下面的CSS和js文件。

<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="src/rmodal.css" type="text/css" />

HTML结构:

使用一个下面的模板来创建一个模态对话框。

<div id="modal">
    <div>
        <div>
            <form method="get">
                <div>
                    <strong>Hello Dialog</strong>
                </div>
                <div>
                    Test Content
                </div>
                <div>
                    <button type="submit" onclick="modal.close();">
                           Close
                       </button>
                </div>
            </form>
        </div>
    </div>
</div>

创建一个按钮来触发模态窗口。

<a href="#" id="showModal" >Show modal</a>

初始化插件:

最后通过下面的js代码来初始化该模态对话框插件。

window.onload = function() {
        var modal = new RModal(
            document.getElementById('modal')
            , options // 配置参数参考后面
        );
        document.addEventListener('keydown', function(ev) {
            modal.keydown(ev);
        }, false);
        document.getElementById('showModal')
        .addEventListener("click", function(ev) {
            ev.preventDefault();
            modal.open();
        }, false);
        window.modal = modal;
    }

配置参数:

rmodal.js模态对话框插件的可用配置参数有:

{
     content: 'This may be used to override all of the dialog inner html'
     , closeTimeout: 500 // Time to wait (ms) before afterClose() is called
     /**
      * Callbacks
      */
     , beforeOpen: function(next) {
         console.log('I will execute right before the dialog is shown');
         next();
     }
     , afterOpen: function() {
         console.log('I will execute just after the dialog is shown');
     }
     , beforeClose: function(next) {
         console.log('I will execute right before the dialog is closed');
         next();
     }
     , afterClose: function() {
         console.log('I will execute just after the dialog is closed');
     }
     /**
      * Classes
      */
     // Added to body element clases while the modal is opened:
     , bodyClass: 'modal-open'
     // Always added to dialog element classes:
     , dialogClass: 'modal-dialog modal-dialog-lg'
     // Added to dialog element classes after it is opened:
     , dialogOpenClass: 'animated fadeIn'
     // Added to dialog element classes before it is closed:
     , dialogCloseClass: 'animated fadeOut'
     /**
      * Focus
      */
     // Set this to "false" to disable focus capture (tab/shift+tab):
     , focus: true
     // Set this to "false" to disable closing when escape key pressed:
     , escapeClose: true
}

文件目录结构

  • dist
    • ┝ rmodal-no-bootstrap.css
    • ┝ rmodal.css
    • ┝ rmodal.js
    • ┝ rmodal.js.map
    • ┝ rmodal.min.js
    • ┝ rmodal.min.js.map
  • ┝ index.html
  • src
    • ┝ rmodal-no-bootstrap.css
    • ┝ rmodal.css
    • ┝ rmodal.js

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:3 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)