点击模态框页面移动模态框

移动模态框页面，首先要获取到当前页面的鼠标按下事件，同时根据鼠标移动的位置实时计算出当前鼠标应该距离屏幕的左右的位置。直接上代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>demo</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #box {
            width: 500px;
            height: 500px;
            /* background: #000; */
            background-size: cover;
            position: absolute;
            /*定位元素 父级元素window就是初始包含块*/
            top: 0;
            left: 0;
            border: 1px solid #333;
        }
    </style>

</head>

<body>

    <div class="container">
        <h2>模态框实例</h2>
        <!-- 按钮：用于打开模态框 -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
		  打开模态框
		</button>

        <!-- 模态框 -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">模态框头部</h4>
                        <button type="button" class="close" data-dismiss="modal">×</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        模态框内容..
                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>

                </div>
            </div>
        </div>

    </div>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script>
        //获取标签
        var box = document.getElementById("myModal");
        var body = document.body;
        var x, y; //全局作用域
        //鼠标按下事件 0级
        box.onmousedown = function(e) { //传入形参e
            var mx = e.clientX; //鼠标距离浏览器左
            var my = e.clientY; //鼠标距离浏览器上
            var bx = box.offsetLeft; //盒子距离浏览器左
            var by = box.offsetTop; //盒子距离浏览器上
            x = mx - bx; //实际盒子距离的浏览器左
            y = my - by; //实际盒子距离的浏览器上
            //鼠标移动事件 0级
            body.onmousemove = function(e) { //拿到全局x、y、
                //获取当前鼠标移动到的坐标点
                var mx = e.clientX;
                var my = e.clientY;
                //盒子距离浏览器
                box.style.left = mx - x + "px";
                box.style.top = my - y + "px";

            };
            //鼠标弹起事件(松开)
            box.onmouseup = function(e) {
                body.onmousemove = null; //不做任何操作//dom0级事件解除事件绑定
                //获取当前鼠标移动到的坐标点
                var mx = e.clientX;
                var my = e.clientY;
                //盒子距离浏览器
                box.style.left = mx - x + "px";
                box.style.top = my - y + "px";
            }
        };
    </script>
</body>

</html>

　　

posted on 2021-07-23 09:16  海哥哥99  阅读(50)  评论(0)  编辑  收藏  举报

导航