JS之拖动模态框案例

双星。

于 2022-01-10 16:04:57 发布

阅读量235

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_44703582/article/details/122412799

版权

效果图：

需求分析

点击登录后登录表单和遮罩层显示，点击关闭按钮隐藏。
输入密码时可以明文查看或者隐藏。
在表单的头部按下鼠标后可以拖拽表单。
鼠标弹起拖拽结束。

话不多说，我们直接上代码：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .login-header {
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
        }
        
        ul,
        li,
        ol,
        dl,
        dt,
        dd,
        div,
        p,
        span,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        a {
            padding: 0px;
            margin: 0px;
        }
        
        .login {
            display: none;
            width: 512px;
            height: 280px;
            position: fixed;
            border: #ebebeb solid 1px;
            left: 50%;
            top: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;

最低0.47元/天解锁文章