使用z-index来做点击其他部分隐藏整个DOM

<div class='my-background'>

    <div class='my-panel'>主要操作框

    <p>是的啊对对</p>

    <panel>9111</panel>

    <p>

    <input type="text"/>

    </p>

    </div>

    <div class='background'></div>

</div>

当点击到  z-index为-1的遮罩层div的时候使用js移除整个div

 

.my-panel {

1. position: absolute;
2. top: 0;
3. right: 0px;
4. border-radius: 5px;
5. background-color: white;
6. border: 1px solid #ddd;
7. box-shadow: 1px 1px 3px #ddd;
8. height: 574px;
9. width: 366px;
10. padding-top: 50px;

}

 

.background {

1. position: absolute;
2. top: 0;
3. bottom: 0;
4. left: 0;
5. right: 0;
6. z-index: -1;

}

 

 

.my-background {

1. position: fixed;
2. top: 0;
3. bottom: 0;
4. left: 0;
5. right: 0;
6. z-index: 1;
7. transition: 
    
   ease 0.1s;

}