一、要实现的功能
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自定义弹框
原文地址：https://www.cnblogs.com/meitian/p/9026412.html