js实现模态框的拖拽

吃葡萄不吐葡萄皮嘻嘻

已于 2022-01-18 17:57:14 修改

阅读量298

点赞数 1

分类专栏： js css 文章标签： javascript html5 vue.js jquery 前端

于 2021-02-24 11:19:33 首次发布

本文链接：https://blog.csdn.net/qq_45695853/article/details/114013574

版权

js 同时被 2 个专栏收录

72 篇文章 2 订阅

订阅专栏

css

61 篇文章 1 订阅

订阅专栏

在这里插入图片描述效果图
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.鼠标的坐标减去鼠标在盒子内的坐标，才是模态框真正的位置。（！！！！！）

吃葡萄不吐葡萄皮嘻嘻

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
js实现模态框的拖拽

1.css样式如下： <style> h2 { text-align: center; cursor: pointer; } .modal { width: 300px; height: 200px; position: fixed; top: 50%; left: 50%;
复制链接

扫一扫