javascript - jQuery 到常规 Javascript - 覆盖

Question

我使用以下 jQuery 代码为我的网站创建了某种覆盖层。

$(function() {
var docHeight = $(document).height();
$("body").append("<div id='overlay'></div><div id='my_popup'></div>");
$("#overlay")
  .height(docHeight)
  .css({
     'opacity' : 0.4,
     'position': 'absolute',
     'top': 0,
     'left': 0,
     'background-color': 'black',
     'width': '100%',
     'z-index': 5000
  });
});

我想使用常规 javascript 产生相同的结果，没有 jquery，我将如何开始/进行此操作？

此外，我当前使用的代码会导致覆盖层在每个页面上重新加载，因为它应该只加载在主页或登陆页面上。有人可以建议解决这个问题吗？

Answer 1

直接从 jQuery 转换为 Vanilla:

(function() {
    if (window.location.href.split('/').pop() == "yourlandingpage") {
        var body = document.body,
            html = document.documentElement,
            docHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight,             html.scrollHeight, html.offsetHeight );

        body.innerHTML += "<div id='overlay'></div><div id='my_popup'></div>";
        document.getElementById("overlay").style.height = docHeight + "px";
        document.getElementById("overlay").className = "NewClass";
    }
}());

然后声明CSS:

.NewClass {
    opacity: 0.4;
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    width: 100%;
    z-index: 5000;
}

<强> JSFiddle Example