PROMULGATOR

    兔****

    湖南省长沙市
    Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<button type="button">登录</button>
<div class="popOutBg"></div>
<div class="popOut">
    <span title="关闭"> x </span>
    <table>
        <caption>欢迎登录本网站</caption>
        <tbody><tr>
            <td width="120">用户名：</td>
            <td><input type="text" class="inp" placeholder="请输入用户名" value="admin"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" class="inp" placeholder="请输入密码"></td>
        </tr>
        <tr>
            <td colspan="2"><input type="button" class="login" value="登录"></td>
        </tr>
    </tbody></table>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
* {
    margin:0;
    padding:0;
}
button,input {
    outline:none;
}
button,.login {
    width:120px;
    height:42px;
    background:#f40;
    color:#fff;
    border:none;
    border-radius:6px;
    display:block;
    margin:20px auto;
    cursor:pointer;
}
.popOutBg {
    width:100%;
    height:100%;
    position:fixed;
    left:0;
    top:0;
    background:rgba(0,0,0,.6);
    display:none;
}
.popOut {
    position:fixed;
    width:600px;
    height:300px;
    top:50%;
    left:50%;
    margin-top:-150px;
    margin-left:-300px;
    background:#fff;
    border-radius:8px;
    overflow:hidden;
    display:none;
}
.popOut > span {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function $(param) {
    if (arguments[1] == true) {
        return document.querySelectorAll(param);
    } else {
        return document.querySelector(param);
    }
}
function ani() {
    $(".popOut").className = "popOut ani";
}
$("button").onclick = function() {
    $(".popOut").style.display = "block";
    ani();
    $(".popOutBg").style.display = "block";
};
$(".popOut > span").onclick = function() {
    $(".popOut").style.display = "none";
    $(".popOutBg").style.display = "none";
};
$(".popOutBg").onclick = function() {
    $(".popOut").style.display = "none";
    $(".popOutBg").style.display = "none";
};
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

jquery弹窗代码

更新时间：2021-07-26 02:12:00

0