js实现模态框的拖拽

在这里插入图片描述效果图
1.css样式如下：

 <style>
        h2 {
    
    
            text-align: center;
            cursor: pointer;
        }

        .modal {
    
    
            width: 300px;
            height: 200px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background: skyblue;
            z-index: 1;
            display: none;
            cursor: move;
        }

        .modal span {
    
    
            position: absolute;
            right: 0;
            top: 0;
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: pink;
            color: #fff;
            text-align: center;
            line-height: 50px;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
        }

        .bg {
    
    
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
            display: none;
        }
    </style>

在这里插入图片描述！！！切记：modal的水平垂直居中千万不要使用此种方法
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
会有明显的bug
2.html+js 如下：

<body>
    <h2>点我显示模态框</h2>
    <div class="modal">
        <span>×</span>
    </div>
    <div class="bg"></div>
    <script>
        window.onload = function () {
    
    
            let modal = document.querySelector('.modal');
            let bg = document.querySelector('.bg');
            let h2 = document.querySelector('h2');
            let span  = document.querySelector('span');
            h2.addEventListener('click', function () {
    
    
                bg.style.display = 'block';
                modal.style.display = 'block';
            })

            span.addEventListener('click', function () {
    
    
                bg.style.display = 'none';
                modal.style.display = 'none';
            })

            modal.addEventListener('mousedown', function (e) {
    
    
                //获取鼠标在盒子内的坐标
                let x = e.pageX - modal.offsetLeft;
                let y = e.pageY - modal.offsetTop;
                function handleMove(e) {
    
    
                //模态框距离页面left和top值
                    let x2 = e.pageX - x;
                    let y2 = e.pageY - y;
                    modal.style.left = x2 + 'px';
                    modal.style.top = y2 + 'px';
                }
                document.addEventListener('mousemove', handleMove);
                document.addEventListener('mouseup', function () {
    
    
                    document.removeEventListener('mousemove', handleMove)
                })
            })
        }
    </script>
</body>

**重点笔记：
1.点击弹出层，模态框和遮罩层就显示出来；
2.点击关闭按钮，模态框和遮罩层就会隐藏起来；
3.页面中拖拽原理：鼠标按下并移动，之后松开鼠标；
4.触发事件是鼠标按下mousedown，鼠标移动mousemove，鼠标弹起mouseup；
5.拖拽过程：鼠标移动过程中，获得最新的值赋给模态框的lefe和top值，这样模态框就可以跟住鼠标走了；
6.鼠标按下触发的事件源是整个模态框(根据自己需求而定)；
7.鼠标的坐标减去鼠标在盒子内的坐标，才是模态框真正的位置。（！！！！！）
**

js实现模态框的拖拽

猜你喜欢