所属分类:网页特效-对话框/灯箱/提示,悬浮层/弹出层
可以通过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" />
使用一个下面的模板来创建一个模态对话框。
<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 }