首页 / JQUERY / <jquery>基本的模态框

<jquery>基本的模态框

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了<jquery>基本的模态框，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1414字，纯文字阅读大概需要3分钟。

内容图文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义模态</title>
    <style>
        .cover {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.4);
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            z-index: 998;
        }

        .modal {
            height: 400px;
            width: 600px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -300px;
            margin-top: -200px;
            z-index: 1000;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<button id="b1">屠龙宝刀,点击就送</button>
<button id="b2">油腻的师姐,在哪里</button>
<div class="cover hide"></div>
<div class="modal hide">
    <form action="">
        <p>
            <label for="">用户名:
                <input type="text">
            </label>
        </p>
        <p>
            <label for="">密码:
                <input type="password">
            </label>
        </p>
        <p>
            <input type="submit" value="登录">
            <input id="cancel" type="button" value="取消">
        </p>
    </form>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
    //找出标签
    $("#b1,#b2").click(function () {
        //把cover和modal展示出来
        $(".cover").removeClass("hide");
        $(".modal").removeClass("hide");
    })
    $("#cancel").click(function () {
        $(".cover").addClass("hide");
        $(".modal").addClass("hide");

    })
</script>
</body>
</html>

基本的模态框' ref='nofollow'>基本的模态框

原文：https://www.cnblogs.com/shuimohei/p/10502736.html