<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>带动画效果的js模态对话框插件rmodal.js</title>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式，使用时可以不引用-->
<link rel="stylesheet" href="dist/rmodal-no-bootstrap.css" type="text/css" />
<script type="text/javascript" src="dist/rmodal.js"></script>
<script type="text/javascript">
window.onload = function() {
var modal = new RModal(document.getElementById('modal'), {
beforeOpen: function(next) {
console.log('beforeOpen');
next();
}
, afterOpen: function() {
console.log('opened');
}
, beforeClose: function(next) {
console.log('beforeClose');
next();
}
, afterClose: function() {
console.log('closed');
}
// , content: 'Abracadabra'
// , bodyClass: 'modal-open'
// , dialogClass: 'modal-dialog-lg'
// , dialogOpenClass: 'fadeIn'
// , dialogCloseClass: 'fadeOut'
// , focus: true
// , focusElements: ['input.form-control', 'textarea', 'button.btn-primary']
// , escapeClose: true
});
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>
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>带动画效果的js模态对话框插件rmodal.js <span>A simple 1.2 KB modal dialog with no dependencies</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-lg-12" style="text-align:center;padding:2em 0;">
<h3>rmodal.js</h3>
<ul>
<li>A simple modal dialog</li>
<li>Plain JavaScript only - no dependencies</li>
<li>All browsers supported (IE9+)</li>
<li>Less than 1.2 KB when gzipped and minified</li>
<li>Bootstrap and Animate.css friendly</li>
<li>Fully unit tested</li>
<li>Supports CommonJS, AMD or globals</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<a href="#" id="showModal" class="btn btn-success">显示模态对话框</a>
</div>
</div>
</div>
</div>
<!--模态窗口-->
<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，我是一个对话框！</strong>
</div>
<div class="modal-body">
<div class="form-group">
<label for="dummyText" class="control-label col-xs-4">描述文本</label>
<div class="input-group col-xs-7">
<input type="text" name="dummyText" id="dummyText" class="form-control" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" onclick="modal.close();">取消</button>
<button class="btn btn-primary" type="submit" onclick="modal.close();">保存</button>
</div>
</form>
</div>
</div>
</div>
<!--<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>-->
</body>
</html>
实现动画效果的js模态对话框插件rmodal.js.zip
版权申诉
117 浏览量
2022-11-10
04:43:24
上传
评论
收藏 84KB ZIP 举报
实现动画效果的js模态对话框插件rmodal.js.zip （18个子文件） 
132692144530578309 rmodal_js css 
htmleaf-demo.css 6KB normalize.css 2KB related 
2.jpg 32KB 1.jpg 37KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 5KB dist rmodal.css 305B rmodal.js 5KB rmodal-no-bootstrap.css 578B rmodal.js.map 23KB rmodal.min.js.map 9KB rmodal.min.js 3KB src rmodal.css 305B rmodal.js 5KB rmodal-no-bootstrap.css 578B资源评论
