html⾃定义弹框⼀、要实现的功能
1、弹框弹出时有遮罩
2、弹框内的⽂字过多时右侧有滚动条
3、根据执⾏结果变更弹框title的样式
⼆、具体实现
思路：定义⼀个有宽⾼的div，默认隐藏，当要显⽰时，设置为display=block来显⽰1、定义div布局，⼀个遮罩层；⼀个弹框（弹框中有标题和内容两部分）
<div id="dialogmask" class="dialogmask opacity"></div>
<div id="dialog" class="box" >　
<div id="dialog_title" class="dialogtitle">
<label >执⾏结果</label>
<label 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;
jquery弹出div窗口
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="cdn.bootcss/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" >　
<div id="dialog_title" class="dialogtitle">
<label >执⾏结果</label>
<label onclick="closepop()">[关闭]</label>
</div>
<div id="dialog_content" class="dialogcontent">
<div id="logcontent" class="logcontent">要显⽰的内容区域~</div>
</div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。