一、要实现的功能

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自定义弹框的更多相关文章

  1. vue3系列：vue3.0自定义弹框组件V3Popup|vue3.x手机端弹框组件

    基于Vue3.0开发的轻量级手机端弹框组件V3Popup. 之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框 ...

  2. RN code push自定义弹框

    最近在弄react native的code push热更新问题.开始是用的后台默默更新配置.由于微软服务器速度问题,经常遇到用户一直在下载中问题.而用户也不知道代码需要更新才能使用新功能,影响了正常业 ...

  3. vue自定义弹框

    vue 全局自定义简单弹框 https://www.jianshu.com/p/1307329aa09e https://www.cnblogs.com/crazycode2/p/7907905.ht ...

  4. swift 自定义弹框

    // //  ViewController.swift //  animationAlert // //  Created by su on 15/12/9. //  Copyright © 2015 ...

  5. artDialog自定义弹框

    弹框内容:<div class='boxy' style="display:none;" id="boxy"> //将div设置成隐藏效果 < ...

  6. android之自定义弹框

    step1 创建窗体 final AlertDialog dialog =new Builder(this).create(); step2 获取View View viewDialog =View. ...

  7. svelte组件：Svelte自定义弹窗Popup组件|svelte移动端弹框组件

    基于Svelte3.x自定义多功能svPopup弹出框组件(组件式+函数式) 前几天有分享一个svelte自定义tabbar+navbar组件,今天继续带来svelte自定义弹窗组件. svPopup ...

  8. 考拉Android统一弹框

    作者:钱成杰 背景 在快速开发的背景下,经历了n个版本后的考拉Android App中已经存在了各种各样看似相同却各有差别的弹框样式.其中包括系统弹框和自定义弹框,并且在线上时常会出现IllegalA ...

  9. layer弹框在实际项目中的一些应用

    官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,l ...

随机推荐

  1. 《算法》第四章部分程序 part 13

    ▶ 书中第四章部分程序,包括在加上自己补充的代码,图的前序.后序和逆后续遍历,以及传递闭包 ● 图的前序.后序和逆后续遍历 package package01; import edu.princeto ...

  2. 《GPU高性能编程CUDA实战》第三章 CUDA设备相关

    ▶ 这章介绍了与CUDA设备相关的参数,并给出了了若干用于查询参数的函数. ● 代码(已合并) #include <stdio.h> #include "cuda_runtime ...

  3. samba配置中常见错误收集.txt

    在命令行输入命令: ~$ smbclient -L \\127.0.0.1按要求输入密码后,提示出错:session setup failed: NT_STATUS_LOGON_FAILURE 这是因 ...

  4. maven 插件深入了解

    http://www.infoq.com/cn/news/2011/04/xxb-maven-7-plugin http://www.infoq.com/cn/news/2011/05/xxb-mav ...

  5. JavaScript：今天是今年第几周？

    用js实现,今天是今年第几周? 基本思路: 1.当前时间 - 今年1月1日0时,拿到时间差(毫秒数) 2.时间差/7天毫秒数,向上取整 var d = new Date('2018-01-01 00: ...

  6. day37-常见内置模块六(其他模块)

    其他内置模块 1.subprocess(系统交互)模块 2.math模块 3.zipfile模块 4.keyword模块 5....

  7. HBase 入门

    使用条件: 海量数据百亿级的行 百万列,  准实时查询 使用场景:  比如金融,交通,电商,移动等 特点: 1:

  8. django 之manytomany

    https://www.cnblogs.com/changbaishan/p/8056762.html https://blog.csdn.net/hpu_yly_bj/article/details ...

  9. php初级之数组与 类初级

    PHP 是后端脚本语言,回顾一下: 1.1 PHP 数组: <?php $user = array(); // 定义一个数组 $user[0] = 'zhangsan'; // 给数组赋值 $u ...

  10. js 引入外部文件之 script 标签

    在我的理解看来,html 就是一个单纯的管显示问题,js就是单纯的管动作问题,css就是单纯的管布局问题,这三个构成了一个网页 在HTML中,经常会用到引入js 文件. 引入js的方法很简单: 1. ...