制作模态框以及实现拖动效果

（一）html基本框架

html框架，主要由三个div盒子组成，点击框，点击后弹出的登录框以及出现的背景

<!-- 点击框 -->
    <div class="btn">
            <a href="javascript:;">
                点击,弹出登录框
            </a>
    </div>
    <!-- 弹出框 -->
    <div class="register">
        <div class="header">
            登录会员
        </div>
        <div class="import">
            <div class="username">
                <strong>用户名:</strong>
                <input type="text" placeholder="请输入用户名">
            </div>
            <div class="password">
                <strong>登录密码:</strong>
                <input type="password" placeholder="请输入登录密码">
            </div>
        </div>
        <div class="footer">
            登录会员
        </div>
        <div class="close">
            <img src="images1/images/关闭.png" alt="">
        </div>
    </div>
    <!-- 大背景 -->
    <div class="bg"></div>
    <!-- JS -->

（二）css中注意事项

1. 由于背景会覆盖整个页面，需要给点击框与登录框添加定位，其中登录框添加固定定位fixed，让其一开始就位于页面中央，点击框给绝对定位absolute

/* 点击框 */
        .btn {
            width: 180px;
            position: absolute;
            top: 50px;
            left: 50%;
            /* 实现水平居中 */
            transform: translate(-50%);
            cursor: pointer;
            /*点击后不能点击，除非关闭登录框*/
            z-index:2;
        }

效果如下图

/* 登录框 */
        .register {
        	/*隐藏，JS实现点击点击框再现*/
            display: none;
            width: 500px;
            position: fixed;
            left: 50%;
            top: 50%;
            /* 水平，垂直均居中 */
            transform: translate(-50%,-50%);
            border: 2px solid #D7DFD2;
            /* 有一定的弧度 */
            border-radius: 20px;
            text-align: center;
            background-color: #fff;
            /* 为了 不让后面的背景颜色覆盖 登录框，让登录框在背景上面 */
            z-index: 1;  
        }

2.这里一定要给登录框加z-index

 html,body {
            width: 100%;
            height: 100%;
        }
       .bg {
           width: 100%;
           height: 100%;
           /*隐藏，JS实现点击点击框再现*/
           display: none;
           background: #7E9DA6;
           /*背景透明度*/
           opacity: .2;
           z-index: -1;
       }

3. 这里设置html，body，width与height均为100%，因为元素高度百分比需要向上遍历父标签要找到一个定值高度才能起作用，而浏览器高，宽可能变化，是个动态，自动给body，以及body的上级html高，宽100%，让背景 .bg 得以铺满页面
ps：以上是部分css代码，其余样式，如，阴影，透明度，鼠标样式，轮廓等，读者可以自行添加
效果如下

（三）JS实现动态效果

 // 获取事件
        // 点击框
        var btn = document.querySelector('.btn');
        // 登录框
        var register = document.querySelector('.register');
        // 背景
        var bg = document.querySelector('.bg');
        // 关闭按钮
        var close = document.querySelector('.close');
        // 登录框  “登录会员”  一行，鼠标可以按下拖动整个登录框的一行
        var header = document.querySelector('.header')
        // 点击点击框，登录框再现
        btn.addEventListener('click',function(){
            register.style.display = 'block';
            bg.style.display = 'block';
        })
        // // 点击点击框，登录框消失，背景消失
        close.addEventListener('click',function(){
            register.style.display = 'none';
            bg.style.display = 'none';
        })
        // 鼠标按下，获取鼠标在.register(登录框)中的位置
        header.addEventListener('mousedown',function(e){
            this.style.cursor= 'move';
            // 鼠标距页面距离  减去  .register距页面距离
            var x = e.pageX-register.offsetLeft;
            var y = e.pageY-register.offsetTop;
            // 鼠标移动时，获取动态坐标
            document.addEventListener('mousemove',fn);
            function fn(e) {
                // 利用定位中的left，top 实现登录框随鼠标移动
                // 注意！！！！！！要加 单位  px ！！！！！！！
                register.style.left = e.pageX-x+'px';
                register.style.top = e.pageY-y+'px';
        }
        // 松开鼠标，移除mousemove事件，让登录框停下
            document.addEventListener('mouseup',function(){
            document.removeEventListener('mousemove',fn);
        })
        })
        

本次分享就到这了！