说明： 使用 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: ;
padding: ;
}
html, body, .fullpage {
width: %;
height: %;
}
.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: ;
padding: ;
}
html, body, .fullpage {
width: %;
height: %;
}
.fullpage {
display: none;
position: fixed;
top: ;
bottom: ;
left: ;
right: ;
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即可将该元素去除。