仿Bootstrap模态框的实现

最新推荐文章于 2024-07-20 17:41:17 发布

LQ-刘强

最新推荐文章于 2024-07-20 17:41:17 发布

阅读量1.3k

点赞数 1

分类专栏： web前端系列文章标签：仿Bootstrap模态框的实现 Bootstrap模态框的实现增强版仿Bootstrap模态框的实现自定义模态框的实现增强版Bootstrap模态框的实现

本文链接：https://blog.csdn.net/qq_33429583/article/details/79768785

版权

web前端系列专栏收录该内容

26 篇文章 2 订阅

订阅专栏

又到周末了，闲来无聊，就仿照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">&times;</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);
});