<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹出层</title> <style> *{ margin:0; padding:0; } #box{ width: 500px; height: 500px; background-color: blue; position: fixed; top:50%; left:50%; margin-left:-250px; margin-top:-250px; display: none; } </style> </head> <body> <button data-btn="success" id="btn">弹出</button> <div id="box"></div> <script> var $bodyHeight = document.documentElement.clientHeight+'px'; var $body = document.getElementsByTagName('body')[0]; var $btn = document.getElementById('btn'); var $box = document.getElementById('box'); $body.style.height = $bodyHeight; //弹出按钮点击 阻止冒泡 $btn.onclick=function(e){ $box.style.display="block" $body.style.backgroundColor = "#eee"; e.stopPropagation() } //body点击 $body.onclick=function(e){ $body.style.backgroundColor = "white"; $box.style.display="none" } //box点击 $box.onclick=function(e){ e.stopPropagation() } </script> </body> </html>