小墨の博客

梦想需要付诸行动,否则只能是梦

Jquery点击弹出登录框效果

点击代码右上角查看演示。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        button {
            width: 50px;
            height: 30px;
            border:none;
            background: #39c;
            color: #fff;
            border-radius: 5px;
            margin-left: 30px;
        }
        .box {
            position: absolute;
            width: 300px;
            height: 220px;
            border: 1px solid #39c;
            border-radius: 8px;
            display: none;
            background: #fff;
        }
        .title {
            width: 100%;
            height: 30px;
            line-height: 30px;
            background: #39c;
            color: #fff;
            text-align: center;
            border-radius: 8px 8px 0 0;
        }
        .login {
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }
        input {
            display: block;
            width: 195px;
            height: 30px;
            font-size: 13px;
            margin-top: 20px;
            padding-left: 5px;
        }
        input:nth-of-type(3) {
            width: 204px;
        }
        .dl {
            border:none;
            background: #39c;
            color:#fff;
        }
        .close {
            position: absolute;
            top:5px;
            right:5px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background: #39c;
            opacity: .8;
            color: #fff;
            border: 1px solid #fff;
            cursor: pointer;
        }
        .top {
            position: fixed;
            right: 30px;
            bottom:55px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #39c;
            color: #fff;
            border-radius: 50%;
        }
        .la {
            margin: 1500px 0 50px 30px;
            color: #666;
        }
        </style>
    </head>
    <body>
        <p><font color="#666">点击登录弹出登录框</font></p>
        <button>登 录</button>
        <p class="la">别拉了下面什么都没有(⊙o⊙)…</p>
        <p class="la">都说了什么都没有啦٩(๑òωó๑)۶
            <br>
            <br>阁下真是个大笨蛋呢( σ'ω')σ</p>
        <div class="box" style="display: none;">
            <div class="title">用户登录</div>
            <div class="close">×</div>
            <div class="login">
                <input type="text" name="" placeholder="请输入用户名">
                <input type="password" name="" placeholder="请输入密码">
                <input type="submit" class="dl" name="" value="登 录">
            </div>
        </div>
        <a href="#">
            <div class="top">↑</div>
        </a>
        <script type="text/javascript" src="https://lib.baomitu.com/jquery/3.2.1/jquery.min.js"></script>
        <script id="rendered-js">
        $(function () {
            $("button").click(function () {
                $(".box").css("display", "block");
                $(".box").css("left", ($(window).width() - $(".box").outerWidth()) / 2);
                $(".box").css("top", ($(window).height() - $(".box").outerHeight()) / 2);
            });

            $(window).on('resize scroll', function () {
                $(".box").css('top', ($(window).height() - $(".box").outerHeight()) / 2 + $(window).scrollTop());
            });

            $(".close").click(function () {
                $(".box").css("display", "none");
            });
        });
        </script>
    </body>
</html>

参考:https://yaw.ee/1350.html

张小弟之家

本文链接:
文章标题:

本站文章除注明转载/出处外,均为原创,若要转载请务必注明出处。转载后请将转载链接通过邮件告知我站,谢谢合作。本站邮箱:admin@only4.work

尊重他人劳动成果,共创和谐网络环境。点击版权声明查看本站相关条款。

    发表评论:

    搜索
    本文二维码
    标签列表
    站点信息
    • 文章总数:503
    • 页面总数:20
    • 分类总数:92
    • 标签总数:207
    • 评论总数:58
    • 浏览总数:211726

    | | |
    | |  Z-Blog PHP