点击div打开弹窗，点击其他区域关闭弹窗 

<!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>

 

posted @ 2023-06-29 14:06  埃菲尔上的加菲猫  阅读(128)  评论(0)    收藏  举报