码迷,mamicode.com
首页 > Web开发 > 详细

html自定义弹框

时间:2018-05-11 23:26:39      阅读:2307      评论:0      收藏:0      [点我收藏+]

标签:span   日志   遮罩   过多   htm   float   dex   body   script   

一、要实现的功能

1、弹框弹出时有遮罩
2、弹框内的文字过多时右侧有滚动条
3、根据执行结果变更弹框title的样式
技术分享图片
 

二、具体实现

思路:定义一个有宽高的div,默认隐藏,当要显示时,设置为display=block来显示
 
1、定义div布局,一个遮罩层;一个弹框(弹框中有标题和内容两部分)
<div id="dialogmask" class="dialogmask opacity"></div>
<div id="dialog" class="box" style="display: none"> 
    <div id="dialog_title" class="dialogtitle">
        <label style="padding-left: 10px">执行结果</label>
        <label style="float: right;padding-right: 10px;" onclick="closelog()">[关闭]</label>
    </div>
      
    <div id="dialog_content" class="dialogcontent">
        <div id="logcontent" class="logcontent”>要展示的弹框内容</div>
          
    </div>   
</div>
 
 
2、弹框样式
 
2.1 弹框是否显示
默认不显示:display=none
当显示时,通过jquery更改显示样式display=block
.box {
    position: absolute;
        display: none;
    width: 60%;
    height: 70%;
    z-index: 100; /*值越大,和其他层层叠时越在上面*/
    left: 20%;
    top: 15%;
    background-color: #fff;
    border: 1px solid rgb(0, 153, 153);
}
 
2.2 弹框中内容部分文字超长时显示滚轴
设置出现滚轴:
overflow:scroll
必须设置height
.dialogcontent {
    padding-top: 20px;
    OVERFLOW: scroll;
    height: calc(100% - 20px);
    height: -webkit-calc(100% - 20px);
}
 
注意:height计算
因为父div设置了height,所以这里设置100%即会撑满整个
但是因为弹框中还有标题占用了20px,所以我们需要做一个padding-top:20px使其不要和标题部分重合
height计算也需要减去标题的20px,通过calc()计算
 
2.3 设置显示的层级
z-index:100;//设置层级,数值越大的在最上层显示
 
所以弹框的z-index最大,然后是遮罩层的
 
 
3、遮罩层样式
.dialogmask {
    position: fixed;
    top: 0px;
    height: 100%;
    width: 100%;
    z-index: 80;
    display: none;
 
}
 
.opacity { /*遮罩浑浊处理*/
    opacity: 0.3;
    filter: alpha(opacity=30);
    background-color: #000;
}
 
同样的初始时设置display:none;显示的时候更改display=block来显示
z-index的值要比弹框的小
position:fixed;展示在整个页面内
 
4、Jquery变更display等css样式
显示弹框:
function showlog_result(result, info) {//展示具体日志内容,以及根据结果是否正确变更title的颜色
    $("#dialog").css({display: "block"});
    $("#dialogmask").css({display: "block"});
    $("#logcontent").html(info);
    if (result) {
        $("#dialog_title").css({background: "#00CC00"});
    } else {
        $("#dialog_title").css({background: "#FF3333"});
    }
 
}
 
说明:通过Jquery的css()方法更改样式后,根据result结果是true还是false变更标题部分的背景颜色
 
关闭弹框:
function close() {//关闭日志弹框
    $("#dialog").css({display: "none"});
    $("#dialogmask").css({display: "none"});
}
 

三、实例代码

<!DOCTYPE html>
<html lang="en">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
 
<head>
    <meta charset="UTF-8">
    <title>测试弹框</title>
    <style>
        .dialogmask {
            position: fixed;
            top: 0px;
            height: 100%;
            width: 100%;
            z-index: 80;
            display: none;
 
        }
 
        .opacity { /*遮罩浑浊处理*/
            opacity: 0.3;
            filter: alpha(opacity=30);
            background-color: #000;
        }
 
        .box {
            overflow: hidden;
            position: absolute;
            width: 60%;
            height: 70%;
            z-index: 100; /*值越大,和其他层层叠时越在上面*/
            left: 20%;
            top: 15%;
            background-color: #fff;
            border: 1px solid rgb(0, 153, 153);
        }
 
        .dialogtitle {
            width: 100%;
            height: 30px;
            line-height: 30px;
            position: absolute;
            font-size: 18px;
            top: 0px;
            background-color: lightgrey;
        }
 
        .dialogcontent {
            padding-top: 20px;
            OVERFLOW: scroll;
            height: calc(100% - 20px);
            height: -webkit-calc(100% - 20px);
        }
 
        .logcontent {
            padding: 10px;
        }
    </style>
    <script>
        //显示弹框,并且根据结果是true或false来更改标题部分的颜色
        function showlog_result(result, info) {//展示具体弹框内容,以及根据结果是否正确变更title的颜色
            $("#dialog").css({display: "block"});//通过Jquery的css()更改样式
            $("#dialogmask").css({display: "block"});
            $("#logcontent").html(info);
            if (result) {
                $("#dialog_title").css({background: "#00CC00"});
            } else {
                $("#dialog_title").css({background: "#FF3333"});
            }
 
        }
 
        function closepop() {//关闭弹框
            $("#dialog").css({display: "none"});
            $("#dialogmask").css({display: "none"});
        }
    </script>
</head>
<body>
<div>
    <button onclick="showlog_result(true,‘展示正确内容的弹框‘)">展示正确弹框</button>
    <button onclick="showlog_result(false,‘展示错误内容的弹框‘)">展示错误弹框</button>
</div>
<div id="dialogmask" class="dialogmask opacity"></div>
<div id="dialog" class="box" style="display: none"> 
    <div id="dialog_title" class="dialogtitle">
        <label style="padding-left: 10px">执行结果</label>
        <label style="float: right;padding-right: 10px;" onclick="closepop()">[关闭]</label>
    </div>
      
    <div id="dialog_content" class="dialogcontent">
        <div id="logcontent" class="logcontent">要显示的内容区域~</div>
          
    </div>
        
</div>
</body>
</html>

 

 

html自定义弹框

标签:span   日志   遮罩   过多   htm   float   dex   body   script   

原文地址:https://www.cnblogs.com/meitian/p/9026412.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!