怎么用JavaScript做弹出式可拖动登录框

这篇文章主要介绍了怎么用JavaScript做弹出式可拖动登录框的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么用JavaScript做弹出式可拖动登录框文章都会有所收获，下面我们一起来看看吧。

创新互联服务项目包括广安网站建设、广安网站制作、广安网页制作以及广安网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，广安网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到广安省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

总体来说实现起来比较简单，老规矩，先搭建html框架，代码如下：

<div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>

    <div id="login" class="login">

        <div id="title" class="login-title">登录会员

            <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>

        </div>

        <div class="login-input-content">

            <div class="login-input">

                <label>用户名：</label>

                <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">

            </div>

            <div class="login-input">

                <label>登录密码：</label>

                <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">

            </div>

        </div>

        <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>

    </div>

    <!-- 遮盖层 -->

    <div id="bg" class="login-bg"></div>

css代码：

<style>

        .login-header {

            width: 100%;

            text-align: center;

            height: 30px;

            font-size: 24px;

            line-height: 30px;

        }

        *{

            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;

            transform: translate(-50%, -50%);

        }

        .login-title {

            width: 100%;

            margin: 10px 0px 0px 0px;

            text-align: center;

            line-height: 40px;

            height: 40px;

            font-size: 18px;

            position: relative;

            cursor: move;

        }

        .login-input-content {

            margin-top: 20px;

        }

        .login-button {

            width: 50%;

            margin: 30px auto 0px auto;

            line-height: 40px;

            font-size: 14px;

            border: #ebebeb 1px solid;

            text-align: center;

        }

        .login-bg {

            display: none;

            width: 100%;

            height: 100%;

            position: fixed;

            top: 0px;

            left: 0px;

            background: rgba(0, 0, 0, .3);

        }

        a {

            text-decoration: none;

            color: #000000;

        }

        .login-button a {

            display: block;

        }

        .login-input input.list-input {

            float: left;

            line-height: 35px;

            height: 35px;

            width: 350px;

            border: #ebebeb 1px solid;

            text-indent: 5px;

        }

        .login-input {

            overflow: hidden;

            margin: 0px 0px 20px 0px;

        }

        .login-input label {

            float: left;

            width: 90px;

            padding-right: 10px;

            text-align: right;

            line-height: 35px;

            height: 35px;

            font-size: 14px;

        }

        .login-title span {

            position: absolute;

            font-size: 12px;

            right: -20px;

            top: -30px;

            background: #ffffff;

            border: #ebebeb solid 1px;

            width: 40px;

            height: 40px;

            border-radius: 20px;

        }

    </style>

有没有觉得CSS才是最复杂难搞的哈哈

最后是js代码：这里我们只让盒子的title部分能拖动，也就是登录框头部部分

<script>

        //获取元素

        var login = document.querySelector('.login');

        var mask = document.querySelector('.login-bg');

        var link = document.querySelector('#link');

        var closeBtn = document.querySelector('#closeBtn');

        var title = document.querySelector('#title');

        //创建点击事件，点击link后，登录框显示

        link.addEventListener('click', function() {

            mask.style.display = 'block';

            login.style.display = 'block';

        })

        //关闭后，登录框隐藏

        closeBtn.addEventListener('click', function() {

            mask.style.display = 'none';

            login.style.display = 'none';

        })

        //鼠标按下，获取登录框位置

        title.addEventListener('mousedown', function(e) {

            var x = e.pageX - login.offsetLeft;

            var y = e.pageY - login.offsetTop;

            //鼠标移动，触发移动事件

            document.addEventListener('mousemove', move)

            function move(e) {

                login.style.left = e.pageX - x + 'px';

                login.style.top = e.pageY - y + 'px';

            }

            //鼠标抬起，销毁鼠标移动事件

            document.addEventListener('mouseup', function() {

                document.removeEventListener('mousemove', move);

            })

        })

</scrip>

关于“怎么用JavaScript做弹出式可拖动登录框”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么用JavaScript做弹出式可拖动登录框”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。

网站标题：怎么用JavaScript做弹出式可拖动登录框
网页地址：https://www.cdcxhl.com/article42/iiicec.html

成都网站建设公司_创新互联，为您提供标签优化、关键词优化、电子商务、域名注册、营销型网站建设、App开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联