55，js常见功能示例，自定义弹窗

---------------------------------------js部分-------------------------------------------

var tag_body = document.getElementsByTagName("body")[0];
var tag_btn1 = document.getElementsByClassName("btn")[0];

/* 绑定事件 */
tag_btn1.onclick = function () {
    /* 添加一个cover */
    var new_cover = document.createElement("div");
    tag_body.appendChild(new_cover);
    new_cover.className = "cover";
    /* 生成一个alert-box */
    alertBox("系统通知", "今晚打老虎..");
}

function alertBox(title, content) {
    var new_box = document.createElement("div");
    tag_body.appendChild(new_box);
    new_box.className = "alert-box";

    var new_div = document.createElement("div");
    new_box.appendChild(new_div);
    new_div.innerHTML = title;

    new_div = document.createElement("div");
    new_box.appendChild(new_div);
    new_div.innerHTML = content;

    new_div = document.createElement("div");
    new_box.appendChild(new_div);

    var new_btn = document.createElement("input");
    new_div.appendChild(new_btn);
    new_btn.type = "button";
    new_btn.value = "确定";
    new_btn.onclick = function () {
        //删除cover
        var tag_cover = document.getElementsByClassName("cover")[0];
        tag_body.removeChild(tag_cover);

        //删除alert-box
        var tag_alert_box = document.getElementsByClassName("alert-box")[0];
        tag_body.removeChild(tag_alert_box);
    }
}
--------------------------------------------html-----------------------------------------

<head>
    <meta charset="UTF-8">
    <title>3.自定义弹框</title>
    <link rel="stylesheet" href="css/no3.css">
</head>
<body>
    <div class="box">
        随便看看 随便看看 随便看看 随便看看 随便看看 随便看看 随便看看 随便看看 随便看看
        随便看看 随便看看 随便看看 随便看看 随便看看 随便看看 随便看看 随便看看 随便看看
        随便看看 随便看看 随便看看 随便看看 随便看看 随便看看 随便看看 随便看看 随便看看
        随便看看 随便看看 随便看看 随便看看 随便看看 随便看看 随便看看 随便看看 随便看看
        随便看看 随便看看 随便看看 随便看看 随便看看 随便看看 随便看看 随便看看 随便看看
        随便看看 随便看看 随便看看 随便看看 随便看看 随便看看 随便看看 随便看看 随便看看
        随便看看 随便看看 随便看看 随便看看 随便看看 随便看看 随便看看 随便看看 随便看看
        <div>
            <input type="button" class="btn" value="提交">
        </div>
    </div>
    <!--<div class="cover"></div>-->
    <!--<div class="alert-box">
        <div>系统提示</div>
        <div>哈哈哈哈</div>
        <div>
            <input type="button" value="确定">
            <input type="button" value="取消">
        </div>
    </div>-->
</body>
<script src="js/no3.js"></script>
----------------------------------------css--------------------------------------

@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
}

.box{
    width: 95vw;
    margin: 3vh auto;
}

.cover{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: darkgray;
    opacity: 0.5;
    z-index: 9999;
}

.alert-box{
    position: absolute;
    width: 50vw;
    height: 200px;
    left: 25vw;
    top: 15vh;
    background-color: ghostwhite;
    z-index: 10000;
}
.alert-box div:first-child{
    line-height: 25px;
    background-color: cadetblue;
    text-align: center;
    color: ghostwhite;
}
.alert-box div:nth-child(2){
    height: 150px;
}

posted on 2022-04-13 21:26 小小程序猿level1 阅读(333) 评论(0) 收藏举报