js實現(xiàn)拖動模態(tài)框效果
本文實例為大家分享了js實現(xiàn)拖動模態(tài)框效果的具體代碼,供大家參考,具體內(nèi)容如下
1.實現(xiàn)效果:
點擊鏈接,彈出模態(tài)框。點擊關閉,關閉模態(tài)框。
點擊標題部分,可以隨意移動模態(tài)框的位置。
主要是獲取鼠標位置。
2.思路:
3.代碼:
<!DOCTYPE html> <html lang="en"> <head> ? ? <meta charset="UTF-8"> ? ? <meta http-equiv="X-UA-Compatible" content="IE=edge"> ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0"> ? ? <title>拖動模態(tài)框</title> ? ? <style> ? ? ? ? body { ? ? ? ? ? ? padding: 0; ? ? ? ? ? ? margin: 0; ? ? ? ? } ? ? ? ? .login { ? ? ? ? ? ? display: none; ? ? ? ? ? ? position: fixed; ? ? ? ? ? ? top: 50%; ? ? ? ? ? ? left:50%; ? ? ? ? ? ? box-sizing:border-box; ? ? ? ? ? ? width:400px; ? ? ? ? ? ? height: 200px; ? ? ? ? ? ? background-color: pink; ? ? ? ? ? ? box-shadow: 0px 0px 20px #ddd; ? ? ? ? ? ? z-index: 9999; ? ? ? ? ? ? transform: translate(-50%, -50%); ? ? ? ? ? ? /* 讓一個固定定位的盒子 垂直居中 */ ? ? ? ? ?? ? ? ? ? } ? ? ? ? h4 { ? ? ? ? ? ? text-align: center; ? ? ? ? ? ? line-height: 70px; ? ? ? ? } ? ? ? ? form { ? ? ? ? ? ? text-align: center; ? ? ? ? ? ? margin-left: 40px; ? ? ? ? } ? ? ? ? a { ? ? ? ? ? ? text-decoration: none; ? ? ? ? ? ? text-align: center; ? ? ? ? } ? ? ? ? .finish { ? ? ? ? ? ? position: absolute; ? ? ? ? ? ? top:-15px; ? ? ? ? ? ? right:-15px; ? ? ? ? ? ? width: 30px; ? ? ? ? ? ? height: 30px; ? ? ? ? ? ? border: 1px solid white; ? ? ? ? ? ? border-radius: 50%; ? ? ? ? ? ? background-color: white; ? ? ? ? ? ? font-size: 10px; ? ? ? ? ? ? line-height: 30px; ? ? ? ? } ? ? ? ? .login-bg { ? ? ? ? ? ? display: none; ? ? ? ? ? ? width: 100%; ? ? ? ? ? ? height: 100%; ? ? ? ? ? ? position: fixed; ? ? ? ? ? ? top:0px; ? ? ? ? ? ? left: 0px; ? ? ? ? ? ? background-color: rgba(0,0,0,0.3); ? ? ? ? } ? ? ? ? .title { ? ? ? ? ? ? width: 400px; ? ? ? ? ? ? height: 50px; ? ? ? ? ? ? cursor: move; ? ? ? ? ? ? margin-top: -20px; ? ? ? ? ? ? height: 70px; ? ? ? ? ? ? ? ? ? } ? ? </style> </head> <body> ? ? <div class="bg"> ? ? ? ? <div class="link"><a href="javascript:;" >點擊,彈出登錄框</a></div> ? ? ? ? <div class="login"> ? ? ? ? ? ? <div class="finish">關閉</div> ? ? ? ? ? ? <div class = "title"><h4>登錄會員</h4></div> ? ? ? ? ? ? <form action=""> ? ? ? ? ? ? ? ? <table> ? ? ? ? ? ? ? ? ? ? <tr> ? ? ? ? ? ? ? ? ? ? ? ? <td>用戶名:</td> ? ? ? ? ? ? ? ? ? ? ? ? <td><input type="text" name="" id="" value="請輸入用戶名"></td> ? ? ? ? ? ? ? ? ? ? </tr> ? ? ? ? ? ? ? ? ? ? <tr> ? ? ? ? ? ? ? ? ? ? ? ? <td>登錄密碼:</td> ? ? ? ? ? ? ? ? ? ? ? ? <td><input type="text" name="" id="" value="請輸入密碼"></td> ? ? ? ? ? ? ? ? ? ? </tr> ? ? ? ? ? ? ? ? </table> ? ? ? ? ? ? ? ? <input type="submit" name="" id="" value="登錄會員"> ? ? ? ? ? ? </form> ? ? ? ? </div> ? ? </div> ? ? <!-- 遮蓋層 --> ? ? <div id="bg" class="login-bg"></div> ? ? <script> ? ? ? ? var a = document.querySelector('a'); ? ? ? ? var login = document.querySelector('.login'); ? ? ? ? var mask = document.querySelector('.login-bg'); ? ? ? ? var finish = document.querySelector('.finish'); ? ? ? ? a.addEventListener('click',function() { ? ? ? ? ? ? login.style.display = 'block'; ? ? ? ? ? ? mask.style.display = 'block'; ? ? ? ? }); ? ? ? ? finish.addEventListener('click', function(){ ? ? ? ? ? ? login.style.display = 'none'; ? ? ? ? ? ? mask.style.display = 'none'; ? ? ? ? }) ? ? ? ? var title = document.querySelector('.title'); ? ? ? ? title.addEventListener('mousedown', function(e){ ? ? ? ? ? ? var x = e.pageX - login.offsetLeft; ? ? ? ? ? ? var y = e.pageY - login.offsetTop; ? ? ? ? ? ? // 鼠標移動的時候,把鼠標在頁面中的坐標,減去 鼠標在盒子內(nèi)的坐標就是模態(tài)框的left和top值。 ? ? ? ? ? ? document.addEventListener('mousemove', move) ? ? ? ? ? ? function move(e) { ? ? ? ? ? ? ? ? // 別忘了加單位。 ? ? ? ? ? ? ? ? login.style.left = e.pageX - x + 'px'; ? ? ? ? ? ? ? ? login.style.top = e.pageY - y + 'px'; ? ? ? ? ? ? } ? ? ? ? ? ? // 鼠標彈起,讓鼠標移動事件停止。 ? ? ? ? ? ? document.addEventListener('mouseup', function() { ? ? ? ? ? ? ? ? document.removeEventListener('mousemove', move); ? ? ? ? ? ? }) ? ? ? ? }) ? ? </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
javascript setAttribute, getAttribute 在不同瀏覽器上的不同表現(xiàn)
該方法把指定的屬性設置為指定的值。如果不存在具有指定名稱的屬性,該方法將創(chuàng)建一個新屬性。2010-08-08JavaScript簡單實現(xiàn)合并兩個Json對象的方法示例
這篇文章主要介紹了JavaScript簡單實現(xiàn)合并兩個Json對象的方法,結合實例形式分析了json對象的遍歷、添加實現(xiàn)合并的相關操作技巧,需要的朋友可以參考下2017-10-10uniapp實現(xiàn)h5、app與微信小程序三端pdf文件下載和預覽功能
作為使用uni-app的小白來說,嘗試了好幾種方法,終于得到了我想要的效果,下面這篇文章主要給大家介紹了關于uniapp實現(xiàn)h5、app與微信小程序三端pdf文件下載和預覽功能的相關資料,需要的朋友可以參考下2022-12-12innerHTML,outerHTML,innerText,outerText的用法及區(qū)別解析
本篇主要是對innerHTML,outerHTML,innerText,outerText的用法及區(qū)別進行了詳細的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12