仿Bootstrap模态框的实现
又到周末了,闲来无聊,就仿照Bootstrap模态框去自定义实现了一个小小的模态框。
特点:【1.自定义模态框支持两种动画的展示与关闭 2.支持页面顶部呈现与支持页面居中呈现】
效果图+代码实现:
主页代码的实现:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模态框</title> <link rel="stylesheet" href="css/component_dialog.css"/> </head> <body> <button class="btn dialog_open">打开弹出框</button> <!--模态框--> <div id="mask"></div> <!--dialog_position_top:在页面顶部居中呈现 dialog_position_center:在页面居中呈现--> <div id="dialog" class="dialog_position_center"> <!--头部分--> <header> <span>用户提示</span><span class="dialog_close">×</span> </header> <!--内容部分--> <div> 杨幂,1986年9月12日出生于北京市,中国内地影视女演员、流行乐歌手、影视制片人。 2005年,杨幂进入北京电影学院表演系本科班就读。 2006年,杨幂因出演金庸武侠剧《神雕侠侣》而崭露头角。 2008年,杨幂凭借古装剧《王昭君》获得了第24届中国电视金鹰奖观众喜爱的电视剧女演员奖提名。 2009年,杨幂在“80后新生代娱乐大明星”评选活动中与其她三位女演员共同被评为“四小花旦”。 2011年,杨幂凭借穿越剧《宫锁心玉》赢得广泛关注,并获得了第17届上海电视节白玉兰奖观众票选最具人气女演员奖 </div> <!--底部部分--> <footer> <button class="btn dialog_close">关闭</button> <button class="btn">确定</button> </footer> </div> </body> </html> <script type="text/javascript" src="js/jquery-1.12.3.js"></script> <script type="text/javascript" src="js/component_dialog.js"></script> <script type="text/javascript"> //打开"模态框" $(".dialog_open").click(() => dialogOpen()); //关闭"模态框" $(".dialog_close").click(() => dialogClose()) </script>
component_dialog.css的代码(做了兼容):
/*遮罩层*/ #mask { width: 100%; height: 100%; background-color: #333333; opacity: 0.3; position: fixed; top: 0; left: 0; z-index: 1; display: none; } /*模态框的模板*/ #dialog { width: 40%; min-height: 5%; max-height: 100%; border: #333333 solid 1px; border-radius: 8px; -webkit-box-shadow: 3px 3px 3px 3px #666666; box-shadow: 3px 3px 3px 3px #666666; position: fixed; background-color: white; z-index: 2; display: none; } #dialog > header { font-size: 18px; position: relative; border-bottom: silver solid 1px; padding: 10px; } #dialog > header > span:last-child { position: absolute; right: 2%; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #CCCCCC; } #dialog > header > span:last-child:hover { color: #666666; cursor: pointer; } #dialog > div { font-size: 14px; border-bottom: silver solid 1px; padding: 10px; } #dialog > footer { padding: 10px 0 10px 78%; } /*设置模态框的位置--页面居中*/ .dialog_position_center{ top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /*设置模态框的位置--页面顶部居中*/ .dialog_position_top{ left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } /*所有按钮的模板*/ [id*="btn"], [class*="btn"] { display: inline-block; background-color: #337AB7; border: #666666 solid 1px; border-radius: 3px; padding: 8px 16px; color: white; cursor: pointer; } [id*="btn"]:hover, [class*="btn"]:hover { background-color: #999999; opacity: 0.8; }
component_dialog.js的代码:
//遮罩层 let _$mask = $("#mask"); let $dialog = $("#dialog"); /** * 打开模态框 * @param animationSwitch 切换模态框的动画 true:淡入 false:滑入 * @returns {*|{opacity}} void方法 */ let dialogOpen = (animationSwitch = true) => animationSwitch ? _$mask.fadeIn(200, function () { $dialog.fadeIn(600); }) : _$mask.fadeIn(200, function () { $dialog.stop().slideDown(200); }); /** * 关闭模态框 * @param animationSwitch 切换模态框的动画 true:淡出 false:滑出 * @returns {*|{opacity}} void方法 */ let dialogClose = (animationSwitch = true) => animationSwitch ? _$mask.fadeOut(200, function () { $dialog.fadeOut(600); }) : _$mask.fadeOut(200, function () { $dialog.stop().slideUp(200); });
API解释:
dialog显示的定位:在id为dialog的div标签中添加class属性[dialog_position_center与dialog_position_top];
打开与关闭dialog的动画切换(默认为true):true--淡入淡出,false--滑入滑出;
总结:模态框的实现虽然是蛮简单的,但也是在网页中经常用到的一项功能,就当练练手吧