一个自用的弹窗demo

最新推荐文章于 2024-05-05 08:00:00 发布

牧逸

最新推荐文章于 2024-05-05 08:00:00 发布

阅读量330

点赞数

分类专栏： demo 文章标签：弹窗 demo

本文链接：https://blog.youkuaiyun.com/qq_42583562/article/details/88386995

版权

demo 专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
            margin: 0;
            padding: 0;
        }
        .change-code{
            width: 35%;
            height: 350px;
            position: absolute;
            top: 200px;
            right: 32.5%;
            border: 1px solid black;
            border-radius:10px;
            background-color: #fff;
            display: none;
        }
        .change-code .close{
            float: right;
            padding-right: 10px;
            padding-top: 10px;
            color: #3d3d3d;
            cursor: pointer;
        }
        .change-code .close:hover{
            color: #CA0C16;
        }
        .allBody{
            width: 100%;
            height: 700px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="allBody" class="allBody"><input type="button" id="change-click" value="按钮"></div>
    <div class="change-code" id="change-code">
            <p class="close" id="x">X</p>
    </div>
</body>
<script type="text/javascript">
    function $(id){return document.getElementById(id);}
    $("x").onclick = function()
        {
            $("change-code").style.display = "none";
            $("allBody").style.opacity = "1";
        }
        $("change-click").onclick = function()
        {
            $("change-code").style.display = "block";
            $("change-code").style.opacity = "1";
            $("allBody").style.disabled = false;
            $("allBody").style.opacity = "0.3";
        }
</script>
</html>

效果如图：