原创
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <title>新手指导页</title> <style> html,body { width: 100%; height: 100%; margin: 0; overflow: auto; } #cloneBox { border: 1px solid #000; box-sizing: border-box; height: 150%; padding: 20px; position: relative; } .redBox { width: 100px; height: 100px; background: red; margin-bottom: 20px; } #mb { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; left: 0; top: 0; } </style> </head> <body> <div id="cloneBox"> <h4>1212</h4> <h2>32323</h2> <div class="redBox" id="redBox"></div> <button id="btn" onClick='createMB()'>指导</button> </div> </body> </html> <script type="text/javascript"> const redBox = document.getElementById('btn') const cloneBox = document.getElementById('cloneBox') const bodyEle = document.body // 元素距离上 左 的距离 let left_ = redBox.offsetLeft let top_ = redBox.offsetTop let that = this function createMB() { let Div = document.createElement('div') Div.id = 'mb' Div.onclick = function() { that.close() } const newEle = redBox.cloneNode(true) newEle.style.position = 'absolute' newEle.style.left = left_ + 'px' newEle.style.top = top_ + 'px' Div.appendChild(newEle) cloneBox.appendChild(Div) } function close() { const mb = document.getElementById('mb') cloneBox.removeChild(mb) } createMB() // const oldEle = document.getElementById('cloneBox') // const newEle = oldEle.cloneNode(true) // document.body.appendChild(newEle) </script>