<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style> .login { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; display: none; background-color: blue; width: 300px; height: 200px; } .login_bg { width: 100%; height: 100%; background-color: rgba(0, 0, 0, .3); position: fixed; top: 0; left: 0; display: none; } .title { width: 100%; height: 50px; cursor: move; background-color: #333; } </style> <title>Document</title></head><body> <button>点我</button> <div class="login"> <div class="title"> <span>关闭</span> </div> </div> <div class="login_bg"></div> <script> $(function () { var login = $('.login'); var loginBg = $('.login_bg') var btn = $('button') var close = $('span') var title = $('.title') btn.click(function () { login.css('display', 'block') loginBg.css('display', 'block') }) close.click(function () { login.css('display', 'none') loginBg.css('display', 'none') }) title.mousedown(function (e) { let x = e.pageX - title.offset().left let y = e.pageY - title.offset().top $(document).mousemove(function (e) { login.css({ 'transform': 'translate(0)' }) login.css({ 'left': e.pageX - x + 'px', 'top': e.pageY - y + 'px' }) $(document).mouseup(function (e) { $(document).unbind() }) }) }) }) </script></body></html>