JavaScript實(shí)現(xiàn)拖動(dòng)模態(tài)框
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)拖動(dòng)模態(tài)框的具體代碼,供大家參考,具體內(nèi)容如下
案例:模態(tài)框拖拽
彈出框,我們也稱為模態(tài)框。
1.點(diǎn)擊彈出層,會(huì)彈出模態(tài)框,并且顯示灰色半透明的遮擋層。
2.點(diǎn)擊關(guān)閉按鈕,可以關(guān)閉模態(tài)框,并且同時(shí)關(guān)閉灰色半透明遮擋層。
3.鼠標(biāo)放到模態(tài)框最上面一行,可以按住鼠標(biāo)拖拽模態(tài)框在頁(yè)面中移動(dòng)。
4.鼠標(biāo)松開,可以停止拖動(dòng)模態(tài)框移動(dòng)。
案例分析
①點(diǎn)擊彈出層,模態(tài)框和遮擋層就會(huì)顯示出來(lái)display:block;
②點(diǎn)擊關(guān)閉按鈕,模態(tài)框和遮擋層就會(huì)隱藏起來(lái)display:none;
③在頁(yè)面中拖拽的原理:鼠標(biāo)按下并且移動(dòng),之后松開鼠標(biāo);
④觸發(fā)事件是鼠標(biāo)按下mousedown,鼠標(biāo)移動(dòng)mousemove 鼠標(biāo)松開mouseup;
⑤拖拽過(guò)程: 鼠標(biāo)移動(dòng)過(guò)程中,獲得最新的值賦值給模態(tài)框的left和top值,這樣模態(tài)框可以跟著鼠標(biāo)走了;
⑥鼠標(biāo)按下觸發(fā)的事件源是最上面一行,就是id 為title;
⑦鼠標(biāo)的坐標(biāo)減去鼠標(biāo)在盒子內(nèi)的坐標(biāo),才是模態(tài)框真正的位置;
⑧鼠標(biāo)按下,我們要得到鼠標(biāo)在盒子的坐標(biāo)。
⑨鼠標(biāo)移動(dòng),就讓模態(tài)框的坐標(biāo)設(shè)置為:鼠標(biāo)坐標(biāo)減去盒子坐標(biāo)即可,注意移動(dòng)事件寫到按下事件里面。
⑩鼠標(biāo)松開,就停止拖拽,就是可以讓鼠標(biāo)移動(dòng)事件解除1. 元素偏移量offset 系列
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center; height: 30px; font-size: 24px; line-height: 30px; } ul,li,ol,dl,dt,dd,div,p,span,h1,h2,h3,h4,h5,h6,a { padding: 0px; margin: 0px; } .login { display: none; width: 512px; height: 280px; position: fixed; border: #ebebeb solid 1px; left: 50%; top: 50%; background: #ffffff; box-shadow: 0px 0px 20px #ddd; z-index: 9999; transform: translate(-50%, -50%); } .login-title { width: 100%; margin: 10px 0px 0px 0px; text-align: center; line-height: 40px; height: 40px; font-size: 18px; position: relative; cursor: move; } .login-input-content { margin-top: 20px; } .login-button { width: 50%; margin: 30px auto 0px auto; line-height: 40px; font-size: 14px; border: #ebebeb 1px solid; text-align: center; } .login-bg { display: none; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, .3); } a { text-decoration: none; color: #000000; } .login-button a { display: block; } .login-input input.list-input { float: left; line-height: 35px; height: 35px; width: 350px; border: #ebebeb 1px solid; text-indent: 5px; } .login-input { overflow: hidden; margin: 0px 0px 20px 0px; } .login-input label { float: left; width: 90px; padding-right: 10px; text-align: right; line-height: 35px; height: 35px; font-size: 14px; } .login-title span { position: absolute; font-size: 12px; right: -20px; top: -30px; background: #ffffff; border: #ebebeb solid 1px; width: 40px; height: 40px; border-radius: 20px; } </style> </head> <body> <div class="login-header"><a id="link" href="javascript:;">點(diǎn)擊,彈出登錄框</a></div> <div id="login" class="login"> <div id="title" class="login-title">登錄會(huì)員 <span><a id="closeBtn" href="javascript:void(0);" class="close-login">關(guān)閉</a></span> </div> <div class="login-input-content"> <div class="login-input"> <label>用戶名:</label> <input type="text" placeholder="請(qǐng)輸入用戶名" name="info[username]" id="username" class="list-input"> </div> <div class="login-input"> <label>登錄密碼:</label> <input type="password" placeholder="請(qǐng)輸入登錄密碼" name="info[password]" id="password" class="list-input"> </div> </div> <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登錄會(huì)員</a></div> </div> <!-- 遮蓋層 --> <div id="bg" class="login-bg"></div> <script> // 1. 獲取元素 var login = document.querySelector('.login'); var mask = document.querySelector('.login-bg'); var link = document.querySelector('#link'); var closeBtn = document.querySelector('#closeBtn'); var title = document.querySelector('#title'); // 2. 點(diǎn)擊彈出層這個(gè)鏈接 link 讓mask 和login 顯示出來(lái) link.addEventListener('click', function() { mask.style.display = 'block'; login.style.display = 'block'; }) // 3. 點(diǎn)擊 closeBtn 就隱藏 mask 和 login closeBtn.addEventListener('click', function() { mask.style.display = 'none'; login.style.display = 'none'; }) // 4. 開始拖拽 // (1) 當(dāng)我們鼠標(biāo)按下, 就獲得鼠標(biāo)在盒子內(nèi)的坐標(biāo) title.addEventListener('mousedown', function(e) { var x = e.pageX - login.offsetLeft; var y = e.pageY - login.offsetTop; // (2) 鼠標(biāo)移動(dòng)的時(shí)候,把鼠標(biāo)在頁(yè)面中的坐標(biāo),減去 鼠標(biāo)在盒子內(nèi)的坐標(biāo)就是模態(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'; } // (3) 鼠標(biāo)彈起,就讓鼠標(biāo)移動(dòng)事件移除 document.addEventListener('mouseup', function() { document.removeEventListener('mousemove', move); }) }) </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS實(shí)現(xiàn)簡(jiǎn)單可拖動(dòng)的模態(tài)框
- JS實(shí)現(xiàn)模態(tài)框拖拽動(dòng)態(tài)效果
- JS實(shí)現(xiàn)簡(jiǎn)單拖動(dòng)模態(tài)框案例
- HTML+CSS+JavaScript實(shí)現(xiàn)可拖拽模態(tài)框
- js實(shí)現(xiàn)拖動(dòng)模態(tài)框效果
- JS實(shí)現(xiàn)拖動(dòng)模態(tài)框案例
- js實(shí)現(xiàn)模態(tài)框的拖拽效果
- js實(shí)現(xiàn)拖動(dòng)模態(tài)框
- JavaScript實(shí)現(xiàn)模態(tài)框拖拽效果
- js實(shí)現(xiàn)模態(tài)框拖拽
相關(guān)文章
JavaScript中正則表達(dá)式使數(shù)字、中文或指定字符高亮顯示
這篇文章主要介紹了JavaScript中正則表達(dá)式使數(shù)字、中文或指定字符高亮顯示,需要的朋友可以參考下2017-10-10手機(jī)端圖片縮放旋轉(zhuǎn)全屏查看PhotoSwipe.js插件實(shí)現(xiàn)
這篇文章主要介紹了手機(jī)端圖片縮放旋轉(zhuǎn)全屏查看PhotoSwipe.js插件實(shí)現(xiàn),感興趣的小伙伴們可以參考一下2016-08-08javascript 常用驗(yàn)證函數(shù)總結(jié)
隨著做項(xiàng)目數(shù)量的越來(lái)越越多,其中用到j(luò)s的地方很多相同,這里自己整理了一些常用表單驗(yàn)證的js方法,雖然和其他js驗(yàn)證框架有一定的差距,但是畢竟是自己總結(jié)的一些東西,在此與紀(jì)錄分享一下。2016-06-06JS從數(shù)組中隨機(jī)取出幾個(gè)數(shù)組元素的方法
JS如何從一個(gè)數(shù)組中隨機(jī)取出一個(gè)元素或者幾個(gè)元素呢?其實(shí)方法很簡(jiǎn)單,下面小編給大家分享了JS隨機(jī)取出幾個(gè)數(shù)組元素的方法,非常不錯(cuò),需要的朋友參考下2016-08-08javascript實(shí)現(xiàn)根據(jù)時(shí)間段顯示問(wèn)候語(yǔ)的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)根據(jù)時(shí)間段顯示問(wèn)候語(yǔ)的方法,涉及javascript時(shí)間與字符串的相關(guān)操作技巧,需要的朋友可以參考下2015-06-06javascript算法學(xué)習(xí)實(shí)現(xiàn)代碼
有1到100000共10萬(wàn)個(gè)數(shù)。從中隨機(jī)抽走兩個(gè)。再把原來(lái)的數(shù)字順序打亂。如何快速找到被抽走的兩個(gè)數(shù)2011-04-04