```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> event protocol </ dt>
<dd class = "dd_eventProtocol"> network layer protocol: <span ID = "networkLayerProtocol"> 111111 </ span> </ dd>
<dd class = "dd_eventProtocol"> Network Application Protocol: <span ID = "networkApplicationProtocol"> 111111 </ span> </ dd>
<dd> Note: <span id = "Remarks"> 111111 </ span> </ dd>
<dd> protocol details: <span id = " protocolDetails "> 111111 </ span> </ dd>
</ DL>
<DL>
<dt> rules </ dt>
<dd> rules: <span id =" ruleItem " > 111111 </ span> </ dd >
</ DL>
<DL>
<dt> event package </ dt>
<dd>长度：<span id="length">111111</span></dd>
<dd> <span class = " float"> Content: </ span> <p id = "content"> dd tab to limit the length; span a label to be left floating; p tags do not float; "content" font can not be greater than where font, or text here will be pushed to the next line! Content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </ 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";
appearMark.style.display="none";
appearMarkInner.style.display="none";
}
</script>
```
49CSS achieve pop
Guess you like
Origin www.cnblogs.com/gushixianqiancheng/p/10966946.html
Recommended
Ranking