如何使一个div能够铺满整个页面？ && 模态框的制作 && outerHTML
说明： 使用 ele.outerHTML = '' 这样的方法可以很容易的清除一个元素。 当然也可以使用parent.removeChild() ，但是相较而言，还是使用 outerHTML = '' 更容易、便捷一些。
如何使一个div能够铺满整个页面？
第一步：提出问题
最近在做项目，希望实现这样一个效果： 在首页的右下角fix一个搜索图片，点击这个搜索图片，就会弹出一个类似模态框的div，这个div会占领整个页面的位置。
第二步：使用demo测试
下面我们就利用一个简单的demo测试。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fullPage</title> <style> * { margin: 0; padding: 0; } html, body, .fullpage { width: 100%; height: 100%; } .fullpage { background-color: #abc; color: white; font-size: 35px; text-align: center; } </style> </head> <body> <div class="fullpage"> 这是一段文字 </div> </body> </html>
效果如下所示：
这是最简单的一种方式。
如果我们希望当点击某一个按钮时， 这个模态框出现， 将其他内容全部覆盖呢？ 并且其下面的内容不可滚动....应该怎么做呢？
首先看下面的例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fullPage</title> <style> * { margin: 0; padding: 0; } html, body, .fullpage { width: 100%; height: 100%; } .fullpage { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: #abc; color: white; font-size: 35px; text-align: center; } button { position: fixed; bottom: 50px; right: 50px; background-color: red; } </style> </head> <body> <div class="content"> 快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/> </div> <button>click to fullpage</button> <div class="fullpage"> 文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/> </div> <script> document.querySelector("button").onclick = function() { document.querySelector(".fullpage").style.display = "block"; } </script> </body> </html>
这里我利用将这个div的position: fixed； top: 0; bottom: 0; left: 0; right: 0;可以将这个div占满整个屏幕。
第三步： 运用到项目中
更好的做法是下面这样的:
var model = document.createElement("div"); model.style.cssText = "position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.7);z-index: 9998;"; document.body.appendChild(model);
即点击某个按钮之后直接创建一个div，然后利用cssText来填充。
注意： 因为这里直接添加到了 body 上，所以使用absolute和使用fixed得到的结果是类似的。
如下：
state.ifShowCart = !state.ifShowCart; if (state.ifShowCart == true) { var model = document.createElement("div"); model.id = "Model"; model.style.cssText = "position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.7);z-index: 9998;"; document.body.appendChild(model); } else { document.getElementById("Model").outerHTML = ""; }
即清空outerHTML即可将该元素去除。
