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" /> <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>
配置参数
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 }
-
content
:对话框中的内容。 -
closeTimeout
:在afterClose()
方法被调用后多少秒钟关闭对话框。单位毫秒。 -
beforeOpen
:模态窗口打开前的回调函数。 -
afterOpen
:模态窗口打开后的回调函数。 -
beforeClose
:模态窗口关闭前的回调函数。 -
afterClose
:模态窗口关闭后的回调函数。 -
bodyClass
:模态窗口body的class样式类。 -
dialogClass
:添加到对话框上的class类。 -
dialogOpenClass
:在模态窗口打开之后添加的class类。 -
dialogCloseClass
:在模态窗口关闭之前添加的class类。 -
focus
:设置为false时,不能使用tab键来获取焦点。 -
escapeClose
:设置为false时,不能使用键盘的ESC键来关闭模态窗口。
rmodal.js模态对话框插件的github地址为:https://github.com/zewish/rmodal.js
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!