一、要实现的功能

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. SecureCRT方向键不可用

    SecureCRT方向键不可用,没有反应 选项--会话选项--终端--仿真

  2. MySQL(Innodb)索引的原理

    引言 回想四年前,我在学习mysql的索引这块的时候,老师在讲索引的时候,是像下面这么说的 索引就像一本书的目录.而当用户通过索引查找数据时,就好比用户通过目录查询某章节的某个知识点.这样就帮助用户有 ...

  3. 深度学习原理与框架-RNN网络架构-RNN网络 1.RNN的前向传播 2.RNN的反向传播

    对于神经网络而言,每一个样本的输入与输入直接都是独立的,即预测的结果之间并没有联系 而对于RNN而言:不仅仅是有当前的输入,而且上一层的隐藏层也将进行输入,用于进行结果的预测.因此每一个输入都与之前的 ...

  4. day21-类的组合

    一.面向对象的组合用法 软件重用的重要方式除了继承之外还有另外一种方式,即:组合组合指的是,在一个类中以另外一个类的对象作为数据属性,称为类的组合 用组合的方式建立了类与组合的类之间的关系,它是一种‘ ...

  5. mfc cef<转>

    在mfc单文档程序中加入cef: .在BOOL CtestCEFApp::InitInstance()中初始化cef HINSTANCE hInst = GetModuleHandle(NULL); ...

  6. c# Type.InvokeMember用法

    函数原型: public object InvokeMember(string, BindingFlags, Binder, object, object[]);string:你所要调用的函数名Bin ...

  7. jquery接触初级-----juqery DOM操作 之二

    DOm 操作之: 1.1  children(),这个函数只是查找元素的子元素,而不考虑其他后代元素 <body> <p title="请选择你最喜欢的水果"&g ...

  8. 微信、陌陌等著名IM软件设计架构详解(转)

    对微信.陌陌等进行了分析,发出来分享一下(时间有些久了) 电量:对于移动设备最大的瓶颈就是电量了.因为用户不可能随时携带电源,充电宝.所以必须考虑到电量问题.那就要检查我们工程是不是有后台运行,心跳包 ...

  9. DATASNAP远程方法返回TSTREAM正解（转咏南兄）

    DATASNAP远程方法返回TSTREAM正解 DATASNAP远程方法返回TSTREAM,如果数据大小超过32K是会报错的.许多DELPHIER栽在这个上头,甚至开始怀疑TSTREAM返回数据的可行 ...

  10. Linux：客户端的实现

    写了一个简单的服务器软件,但是没有写客户端.现在我将客户端实现了,其实昨天已经说了客户端的实现步骤了. 步骤: socket() 初始化 connet()链接 从标准输入读数据fgets() 传数据到 ...