rmodal.js是一款带动画效果的js模态对话框插件。rmodal.js模态对话框插件压缩版本仅1.2kb，没有任何外部依赖，可以制作出带动画特效的模态对话框效果。

安装
可以通过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" />
<script type="text/javascript" src="src/rmodal.js"></script>

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

<div id="modal" class="modal">
        <div class="modal-dialog animated">
            <div class="modal-content">
                <form class="form-horizontal" method="get">
                    <div class="modal-header">
                        <strong>Hello Dialog</strong>
                    </div>
  
                    <div class="modal-body">
                        Test Content
                    </div>
  
                    <div class="modal-footer">
                        <button class="btn btn-primary"  type="submit" onclick="modal.close();">
                            Close
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

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

<a href="#" id="showModal" class="btn btn-success">Show modal</a>

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

<script type="text/javascript">
    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;
    }
</script>