```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.appearMark{ width:100%;height:100%;background: cadetblue;z-index: 2;position: absolute;display: none;top:0; opacity: 0.2;}
.appearMarkInner{width:1000px;height:555px;background: white;margin:auto;position: absolute;display: none;top:0;right:0;bottom:0;left:0;opacity:1;z-index: 4;}
.appearMarkInner .detail{height:40px;line-height:40px;padding-left:20px;background:deepskyblue;color:white;font-size: 14px;}
.appearMarkInner .detail span{display:inline-block;float:right;margin-right: 20px;cursor: pointer;user-select: none}
.appearMarkInner dl{padding:5px 50px;}
.appearMarkInner dl dt{border-bottom: 1px solid dimgray;height:30px;font-size: 16px;color:deepskyblue;}
.appearMarkInner dl dd{padding:5px 0;font-size: 14px;}
.appearMarkInner dl dd.dd_eventContent{width:447px;display: inline-block;}
.appearMarkInner dl dd.dd_eventProtocol{width:447px;display: inline-block;}
.appearMarkInner dl dd span{display: inline-block;}
.appearMarkInner dl dd span.float{float:left;font-size: 14px;}
.appearMarkInner dl dd p{width:902px;font-size: 14px;}
</style>
</head>
<body>
<div id="clickAppear">点击</div>
<div class="appearMark" id="appearMark"></div>
<div class="appearMarkInner" id="appearMarkInner">
<p class="detail">事件信息 <span id="clickDisappear">关闭</span></p>
<dl>
<dt>事件内容</dt>
<dd class="dd_eventContent">事件等级：<span id="eventGrade">111111</span></dd>
<dd class="dd_eventContent">风险等级：<span id="riskGrade">111111</span></dd>
<dd class="dd_eventContent">事件类别：<span id="eventCategory">111111</span></dd>
<dd class="dd_eventContent">发生日期：<span id="happenDate">111111</span></dd>
<dd class="dd_eventContent">发生时间：<span id="happenTime">111111</span></dd>
</dl>
<dl>
<dt>事件协议</dt>
<dd class="dd_eventProtocol">网络层协议：<span id="networkLayerProtocol">111111</span></dd>
<dd class="dd_eventProtocol">网络应用协议：<span id="networkApplicationProtocol">111111</span></dd>
<dd>备注：<span id="remarks">111111</span></dd>
<dd>协议细节：<span id="protocolDetails">111111</span></dd>
</dl>
<dl>
<dt>规则项</dt>
<dd>规则项：<span id="ruleItem">111111</span></dd>
</dl>
<dl>
<dt>事件包</dt>
<dd>长度：<span id="length">111111</span></dd>
<dd><span class="float">内容：</span><p id="content" >dd标签要限制长度；span标签要左浮动；p标签不要浮动；“内容”的字体不能大于这里的字体，否则这里的文字会被挤到下一行！内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p></dd>
</dl>
</div>
</body>
</html>
<script>
var clickAppear=document.getElementById("clickAppear");
var appearMark=document.getElementById("appearMark");
var appearMarkInner=document.getElementById("appearMarkInner");
var clickDisappear=document.getElementById("clickDisappear");
clickAppear.onclick=function () {
appearMark.style.display="block";
appearMarkInner.style.display="block";
};
clickDisappear.onclick=function () {
appearMark.style.display="none";
appearMarkInner.style.display="none";
}
</script>
```
49CSS实现弹窗
猜你喜欢
转载自www.cnblogs.com/gushixianqiancheng/p/10966946.html
今日推荐
周排行