显示隐藏区域

最新推荐文章于 2023-12-16 14:09:57 发布

Rocke369

最新推荐文章于 2023-12-16 14:09:57 发布

阅读量311

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_39314291/article/details/82155391

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Add HTML

<a id="login">登录</a>
<div id="hidden-box">
    <a id="close">×</a>
</div>

Add CSS

    #hidden-box {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(49, 49, 49, 0.45);
        top: 0;
        left: 0;
        display: none;
    }
    #close {
        position: absolute;
        right: 30px;
        top: 30px;
        font-size: 33px;
    }

Add JavaScript

function $(id) {
    return typeof id === "string" ? document.getElementById(id) : null;
}

$("login").onclick = function () {
    $("hidden-box").style.display = "block";
}
$("close").onclick = function () {
    $("hidden-box").style.display = "none";
}

或

Add jQuery

$("#login").click(function () {
    $("#hidden-box").css("display", "block");
});
$("#close").click(function () {
    $("#hidden-box").css("display", "none");
});