效果如下:
代码如下:
<div class="clickBtn">点击,弹出登录框</div> <div class="login"> <h3>登录会员</h3> <table> <tr> <td class="left">用户名:</td> <td><input type="text" placeholder="请输入用户名" name="" id=""></td> </tr> <tr> <td class="left">登陆密码:</td> <td><input type="text" placeholder="请输入登录密码" name="" id=""></td> </tr> </table> <button>登录会员</button> <div class="closebtn">关闭</div> </div> <div class="mask"></div>
style:
<style> * { margin: 0; padding: 0; } .mask { display: none; position: absolute; top: 0; left: 0; height: 100vh; width: 100%; background-color: rgba(0, 0, 0, .3); } .clickBtn { margin: 10px auto; width: 200px; border: 0px; font-size: 20px; font-weight: 700; background-color: #fff; cursor: pointer; } .login { visibility: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; padding: 20px; box-sizing: border-box; width: 500px; height: 300px; border: 1px solid #eee; background-color: #fff; z-index: 1; } .login h3 { margin-bottom: 20px; font-size: 20px; font-weight: 400; height: 30px; width: 100%; text-align: center; cursor: move; } .login table { flex: 1; display: flex; margin: 0; padding: 0; } .login table tr { height: 50px; text-align: right; } .login table tr input { width: 300px; height: 30px; border-radius: 2px; border: 1px solid #eee; } .login table .left { font-weight: 400; width: 40%; } .login button { width: 260px; height: 40px; background-color: #fff; border: 1px solid #eee; border-radius: 2px; cursor: pointer; } .login button:hover { color: #fff; background-color: skyblue; } .login .closebtn { position: absolute; right: 0; top: 0; transform: translate(50%, -50%); width: 50px; height: 50px; text-align: center; line-height: 50px; background-color: orange; border-radius: 50%; cursor: pointer; } </style>
js:
<script> let btn = document.querySelector('.clickBtn') let login = document.querySelector('.login') let closebtn = document.querySelector('.closebtn') let mask = document.querySelector('.mask') let title = document.querySelector('h3') let body = document.querySelector('body') btn.addEventListener('click', function () { mask.style.display = 'block' login.style.visibility = 'visible' }) closebtn.addEventListener('click', function () { mask.style.display = 'none' login.style.visibility = 'hidden' }) title.addEventListener('mousedown', function (e) { let x = e.pageX - login.offsetLeft let y = e.pageY - login.offsetTop function move(e) { // 如果此处仍然用 x=e.pageX - x;login.style.left=x+'px' 就会出现错误,因为这里是浅拷贝,引用的是同一个地址,而mousedown事件一直触发mousemove事件,导致x对应地址的值一直在改变,且login.style.left=x+'px' 指向的也是这个地址,所以页面的区域就会出现晃动 var xx = e.pageX - x; var yy = e.pageY - y; console.log(x, y); login.style.top = yy + 'px'; login.style.left = xx + 'px'; } // 在页面任何地方都应触发mousemove,故监听document的mousemove事件 document.addEventListener('mousemove', move) // 在页面任何地方都应触发mouseup,故监听document的mouseup事件 document.addEventListener('mouseup', function () { document.removeEventListener('mousemove', move) }) }) </script>