单击键盘按键弹出窗口案例

甘臣

已于 2024-08-17 18:41:14 修改

阅读量493

点赞数 11

分类专栏： html+css+js 文章标签： javascript 开发语言 ecmascript 前端 css3 html

于 2024-08-17 11:25:00 首次发布

本文链接：https://blog.csdn.net/qq_33607094/article/details/141277838

版权

html+css+js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

如题(记录学习过程)

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="tc.css">
</head>
<body>
    <div class="bodybox">
        <div class="弹窗">

            <button id="关闭">&times;</button>

            <h1>弹窗</h1>
            <p>点击链接</p>
            <a href="#">链接</a>

        </div>
    </div>

    <script>
        window.addEventListener("keydown",function(e){
            if (e.Code== "Tab") {
                document.querySelector(".弹窗").style.display = "flex"
                document.querySelector("body").style.display = "flex"
            }
        })

        document.querySelector("#关闭").addEventListener("click",function(){
            document.querySelector(".弹窗").style.display = "none"
            document.querySelector("body").style.display = "none"
        })
    </script>
</body>
</html>

tc.css文件

*{
    padding: 0px;
    margin: 0px;
}

body{
    display: none;

    background-color: rgba(90, 90, 54, 0.1);
    width: 100%;
    height: 100%;


    z-index: 8;
}

.弹窗{
    display: none;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    width: 20%;
    height: 100%;
    background-color: lightblue;
    position: absolute;
    padding: 40px 40px;
    left: 0%;
    top: 0%;
    border-radius: 10px;
    overflow: scroll;

    z-index: 9;
}

.弹窗 button{
    margin: -15px -10px 0 auto;
    width: 20px;
    height: 40px;
    font-size: 30px;
    background: none;
    border: none;
    cursor: pointer;
}

.弹窗 p{
    margin: 5px 20px;
    font-size: 12px;
    color: rgb(99, 98, 98);
    transition: 0.4s
}

.弹窗 a:hover {
    scale: 0.94;
}