如何使一个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: ;

            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即可将该元素去除。