<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.windowClass{
height:100px;
width:100px;
border: 1px solid rosybrown;
}
.upContent{
background: linear-gradient(150deg, rgba(24,41,114,0) 0%, rgba(10,18,62,0.21) 100%);
box-shadow: inset 0px 0px 21px 0px rgba(26,73,177,0.63);
border: 1px solid;
border-image: linear-gradient(116deg, rgba(77, 166, 239, 0), rgba(37, 109, 219, 1)) 1 1;
display: flex;
padding: 7px;
margin-bottom: 2px;
}
.upContent img {
width: 26px;
height: 26px;
margin-right: 11px;
}
.upContent span{
font-size: 16px;
font-family: SourceHanSansSC-Regular, SourceHanSansSC;
font-weight: 400;
color: #FFFFFF;
line-height: 24px;
letter-spacing: 1px;
}
/* 下方样式 */
.downContent{
background-image: url('../img/housePersonBac.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
padding: 23px 42px 12px 33px;
}
/* 下方 左侧头像 */
.downContent .downLeft{
display: flex;
flex-direction: column;
margin-right: 43px;
align-items: center;
}
.downContent .downLeft img{
width: 52px;
height: 52px;
box-shadow: inset 0px 1px 14px 0px #2BA1FF;
border-radius: 25px;
border: 2px solid #2BA1FF;
}
/* 下方 右侧人数 */
.downContent .downRight{
display: flex;
flex-direction: column;
align-items: center;
}
.number{
background-image: url('../img/peopleNum.png');
background-size: 100% 100%;
text-align: center;
line-height: 56px;
width: 56px;
height: 56px;
font-size: 20px;
font-family: Helvetica-Bold, Helvetica;
font-weight: bold;
color: #CFEAFF;
}
/* 姓名 */
.downName{
font-size: 14px;
font-family: SourceHanSansSC-Regular, SourceHanSansSC;
font-weight: 400;
color: #FFFFFF;
line-height: 20px;
}
/* 业主 */
.identity{
background: linear-gradient(180deg, #80A4FF 0%, rgba(128,164,255,0) 53%, #80A4FF 100%);
border-radius: 14px;
opacity: 0.8;
font-size: 12px;
font-family: SourceHanSansSC-Regular, SourceHanSansSC;
font-weight: 400;
color: #FFFFFF;
line-height: 18px;
padding: 2px 7px;
}
</style>
</head>
<body>
<div class="windowClass" id="windowID"></div>
<div style="position: absolute; display: none;" id="messageID">
<div class="upContent">
<img src="../img/home.png" alt="" onclick="closeFun()">
<span>108号楼3单元402 </span>
</div>
<div class="downContent">
<div class="downLeft">
<img src="../img/people.jpg" alt="">
<div>
<span class="downName">刘志斌</span>
<span class="identity">业主</span>
</div>
</div>
<div class="downRight">
<span class="number">6</span>
<span class="downName">人数</span>
</div>
</div>
</div>
<script>
document.getElementById('windowID').addEventListener('click',function (e) {
//mousemove 只要鼠标一移动，就会触发事件
//获取鼠标最新的坐标
// console.log(e.pageY)
// console.log(e.pageX);
let x = e.pageX
let y = e.pageY
document.getElementById('messageID').style.display = 'inline-block'
document.getElementById('messageID').style.left = x + 'px'
document.getElementById('messageID').style.top = y + 'px'
e.stopPropagation();//阻止冒泡
})
document.addEventListener('click',function(){
document.getElementById('messageID').style.display = 'none';//隐藏
});
function closeFun(){
document.getElementById('messageID').style.display="none";
}
</script>
</body>
</html>
标签：flex,document,height,点击,background,div,font,display,弹窗 From： https://www.cnblogs.com/brillant/p/17514081.html