一、要实现的功能

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. 【转】不联网如何PING通WIN主机和VMWARE

    原文地址:http://www.gqgtpc.com/thread-76838-1-1.html 一般情况下,如果宿主主机的网口连接网线并且能够上网,那么按照VM的默认安装,在VM-Settings- ...

  2. mysql错误:Column count doesn't match value count at row 1

    mysql错误:Column count doesn't match value count at row 1 mysql错误:Column count doesn't match value cou ...

  3. django之runserver命令分析

    def inner_run(self, *args, **options):#runserver命令执行的内容 # If an exception was silenced in Management ...

  4. sql 日期格式

    select CONVERT(varchar(10), getDate(),121) --不要时间2002-01-01 select CONVERT(varchar(10), getDate(),12 ...

  5. js人形时钟

    https://blog.csdn.net/rsylqc/article/details/44808063 分享自:http://chabudai.org/blog/?p=59 在这个网站看到一个很有 ...

  6. Java ssl认证记录

    听到有人在用,所以自己随便搜了搜试了下,这里就是简单记录 就是操作了一遍这篇博文 https://blog.csdn.net/a495614205/article/details/12648939 i ...

  7. Lazarus 中文汉字解决方案

    使用Lazarus不得不面对编码问题,尤其中文.Lazarus使用的是UTF8编码,而很多windows程序使用的是ANSI编码,编码问题在此不多说大家可以google去. ANSI数据库与Lazar ...

  8. sql help cs

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Confi ...

  9. [jPlayer]一分钟部署jPlayer

    ---------------------------------------------------------------------------------------------------- ...

  10. Delphi实现图像文本旋转特效完整代码

    Delphi实现图像文本旋转特效完整代码,本程序利用的控件主要是Panel 控件.Image 控件.Edit 控件.Label 控件和Button 控件.本程序的关键是利用Delphi 的bmp_ro ...