一、要实现的功能

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. 最好的ie版本检测方式

    预备知识:NodeList的实时性 通过 document.getElementsByTagName,document.forms ,document.images  等方法获取到nodelist以后 ...

  2. yii主题

    修改应用的配置文件(protected/config/main.php)中加入 return array( ’theme’=>’basic’, ); 所有的视图文件必须位于views下 ,布局视 ...

  3. tensorflow 入门

    1.  tensorflow 官方文档中文版(下载) 2.  tensorflow mac安装参考 http://www.tuicool.com/articles/Fni2Yr 3. 源码例子目录 l ...

  4. linux path 与 classpath 区别

    一.OS依据path中的路径信息来寻找可执行指令: 例如: cat /etc/profile 我们就可以在任意目录执行hadoop / hdfs / yarn / java 等相关命令了 export ...

  5. 【4-1】js函数、事件、补充知识

    一.函数操作 (一)字符串操作: (1)变量名.toLowerCase():--转小写     toUpperCase():----转大写 (2)变量名.substring(索引,截取到位数);--- ...

  6. Oracle 表复杂查询之多表合并查询

    转自:https://www.cnblogs.com/GreenLeaves/p/6635887.html 本文使用到的是oracle数据库scott方案所带的表,scott是oracle数据库自带的 ...

  7. go遍历某个文件夹

    //遍历文件夹 dir, err := ioutil.ReadDir("./upload_tmp")for _,file := range dir{ logs.Debug(file ...

  8. JS中，如何判断一个被转换的数是否是NaN

    var x="abc"; //isNaN()函数判断是否是NaN if (isNaN(parseInt(x))) { alert("非数字"); } else{ ...

  9. CAS单点登录原理解析

    转自: https://www.cnblogs.com/lihuidu/p/6495247.html 1.基于Cookie的单点登录的回顾        基于Cookie的单点登录核心原理: 将用户名 ...

  10. Python 3 学习笔记（3）

    模块 编写模块 # fibo.py # Fibonacci numbers module def fib(n): # write Fibonacci series up to n a, b = 0, ...