当前位置：首页 > 行业动态 > 正文

jquery弹出窗口怎么能移动

admin
行业动态
2024-03-18
3263

要实现jQuery弹出窗口的移动，可以通过编写一个简单的JavaScript函数来实现，这个函数可以捕获鼠标在弹出窗口标题栏上的点击和拖动事件，然后根据鼠标的移动距离来调整弹出窗口的位置，下面是详细的技术教学：

jquery弹出窗口怎么能移动第1张

1、我们需要创建一个弹出窗口的基本结构，这里我们使用HTML和CSS来创建一个简单的弹出窗口：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>jQuery弹出窗口移动示例</title>
    <style>
        .modal {
            display: none;
            position: fixed;
            zindex: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            backgroundcolor: rgba(0, 0, 0, 0.4);
        }
        .modalcontent {
            backgroundcolor: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        .close {
            color: #aaa;
            float: right;
            fontsize: 28px;
            fontweight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            textdecoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button id="openModal">打开弹出窗口</button>
    <div id="myModal" >
        <div >
            <span >&times;</span>
            <p>这是一个可以移动的弹出窗口！</p>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
    <script>
        // 在这里添加jQuery代码
    </script>
</body>
</html>

2、接下来，我们需要使用jQuery来实现弹出窗口的显示、隐藏以及移动功能，在<script>标签内添加以下代码：

$(document).ready(function () {
    var modal = $("#myModal");
    var btn = $("#openModal");
    var span = $(".close");
    btn.click(function () {
        modal.show();
    });
    span.click(function () {
        modal.hide();
    });
    $(window).click(function (event) {
        if ($(event.target).is(modal)) {
            modal.hide();
        }
    });
    $(".modalcontent").mousedown(function (event) {
        var shiftX = event.clientX modal.offset().left;
        var shiftY = event.clientY modal.offset().top;
        $(".modalcontent").mousemove(function (event) {
            modal.offset({
                top: event.clientY shiftY,
                left: event.clientX shiftX
            });
        });
        $(".modalcontent").one("mouseup", function () {
            $(".modalcontent").unbind("mousemove");
        });
    });
});

这段代码首先获取了弹出窗口、打开按钮、关闭按钮以及窗口对象，然后为打开按钮和关闭按钮添加了点击事件，分别用于显示和隐藏弹出窗口，接着，为窗口对象添加了一个点击事件，用于在点击窗口外的其他地方时隐藏弹出窗口。

为弹出窗口内容添加了一个鼠标按下事件，在这个事件中，我们计算了鼠标在弹出窗口标题栏上的位置与弹出窗口左上角的距离（shiftX和shiftY），然后为弹出窗口内容添加了一个鼠标移动事件，用于根据鼠标的移动距离调整弹出窗口的位置，当鼠标抬起时，取消鼠标移动事件的绑定，以避免在移动过程中重复触发。

现在，当你点击“打开弹出窗口”按钮时，弹出窗口将显示在屏幕上，你可以通过拖动弹出窗口标题栏来移动弹出窗口，点击弹出窗口外的其他地方或关闭按钮，弹出窗口将隐藏。