一、要实现的功能

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. 一个简单的python登录验证系统

      希望大家来指正一下,之前间断学习了很久,刚捡起来继续学习,下面的代码写的不太好,希望看到的大神能够给予指正. 修正版: 1 # python_zhangzengqiang 2 3 a = open ...

  2. hive 动态分区实现 （hive-1.1.0）

    笔者使用的hive版本是hive-1.1.0 hive-1.1.0动态分区的默认实现是只有map没有reduce,通过执行计划就可以看出来.(执行计划如下) insert overwrite tabl ...

  3. Http协议基础知识

    r equest POST https://re.csdn.net/csdnbi HTTP/1.1方法 url/uri 协议的版本号 1.1Host: re.csdn.netConnection: k ...

  4. python __class__属性

    >>> class a(object): pass >>> o=a() >>> dir(o) ['__class__', '__delattr__ ...

  5. 白鹭引擎 - 对象的添加与删除 ( 开关效果 addChild, removeChild )

    class Main extends egret.DisplayObjectContainer { /** * Main 类构造器, 初始化的时候自动执行, ( 子类的构造函数必须调用父类的构造函数 ...

  6. docker利用Dockerfile来制作镜像

    在前面的例子(docker tomcat镜像制作)中,我们从下载镜像,启动容器,在容器中输入命令来运行程序,这些命令都是手工一条条往里输入的,无法重复利用,而且效率很低.所以就需要一 种文件或脚本,我 ...

  7. rtmp推流开源代码备注一下

    https://github.com/runner365/AnyRTC-RTMP https://github.com/runner365

  8. Delphi 修改本地日期和时间

    procedure TForm1.ModifySysdate(D: Double); var systemtime:Tsystemtime; DateTime:TDateTime; begin Set ...

  9. Jmeter的安装与使用

    安装Jmeter之前需要先配置Java环境   当配置完Jmeter运行的环境之后,就可以开始安装Jmeter了. 为什么既要告诉各位＂在Linux系统内安装Jmeter＂,又要告诉各位＂在Windo ...

  10. JULIA BOORSTIN — Interview a Broadcaster!

    JULIA BOORSTIN — Interview a Broadcaster! Share Tweet Share Tagged With: Interview a Broadcaster Stu ...