js實(shí)現(xiàn)拖動模態(tài)框

更新時間：2022年07月03日 13:22:41 作者：Favour72

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)拖動模態(tài)框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

模態(tài)框,我們也叫彈出框,可以在網(wǎng)易云,京東等之類的網(wǎng)頁中看到。

效果如下:

代碼思路:

1．點(diǎn)擊彈出層，會彈出模態(tài)框，并且顯示灰色半透明的遮擋層。

2．點(diǎn)擊關(guān)閉按鈕，可以關(guān)閉模態(tài)框，并且同時關(guān)閉灰色半透明遮擋層。

3．鼠標(biāo)放到模態(tài)框最上面一行，可以按住鼠標(biāo)拖拽模態(tài)框在頁面中移動。

4．鼠標(biāo)松開，可以停止拖動模態(tài)框移動。

5.在頁面中拖拽的原理︰鼠標(biāo)按下并且移動，之后松開鼠標(biāo)

6.觸發(fā)事件是鼠標(biāo)按下mousedown，鼠標(biāo)移動mousemove鼠標(biāo)松開mouseup

7.拖拽過程:鼠標(biāo)移動過程中，獲得最新的值賦值給模態(tài)框的left和top值，這樣模態(tài)框可以跟著鼠標(biāo)走了

8.鼠標(biāo)按下觸發(fā)的事件源是最上面一行．就是id 為title

9.鼠標(biāo)的坐標(biāo)減去鼠標(biāo)在盒子內(nèi)的坐標(biāo),才是模態(tài)框真正的位置。

10.鼠標(biāo)按下，我們要得到鼠標(biāo)在盒子的坐標(biāo)。

11.鼠標(biāo)移動，就讓模態(tài)框的坐標(biāo)設(shè)置為︰鼠標(biāo)坐標(biāo)減去盒子坐標(biāo)即可，注意移動事件寫到按下事件里面。

代碼步驟:

1.點(diǎn)擊彈出層,模態(tài)框和遮擋層就會顯示出來 display:block
1.1點(diǎn)擊彈出層這個鏈接link 讓mark 和login 顯示出來

2. 點(diǎn)擊關(guān)閉按鈕,模態(tài)框和遮擋層就會隱藏出來 display:none
2.1點(diǎn)擊彈出層這個關(guān)閉按鈕closeBtn 讓mark 和login 隱藏起來

3.開始拖拽
1)當(dāng)鼠標(biāo)按下,就獲得鼠標(biāo)在盒子內(nèi)的坐標(biāo)
2)鼠標(biāo)移動的時候，把鼠標(biāo)在頁面中的坐標(biāo) 減去鼠標(biāo)在盒子中的坐標(biāo)就是模態(tài)框的left和top值注意移動事件寫到按下事件里面。
3)鼠標(biāo)彈起,就讓鼠標(biāo)事件移除

具體每一步的步驟也會在代碼中寫出來

html部分:

<div class="login-header">
?? ??? ??? ?<a href="javascript:;" id="link">
?? ??? ??? ??? ?點(diǎn)擊,彈出登錄框
?? ??? ??? ?</a>
?? ??? ?</div>
?? ??? ?<div id="login" class="login">
?? ??? ??? ?<div id="title" class="login-title">登錄會員
?? ??? ??? ??? ?<span>
?? ??? ??? ??? ??? ?<a href="javascript:void(0);" id="closeBtn">
?? ??? ??? ??? ??? ??? ?關(guān)閉
?? ??? ??? ??? ??? ?</a>
?? ??? ??? ??? ?</span>
?? ??? ??? ?</div>
?? ??? ??? ?<div class="login-input-content">
?? ??? ??? ??? ?<div class="login-input">
?? ??? ??? ??? ??? ?<label>用戶名:</label>
?? ??? ??? ??? ??? ?<input type="text" name="info[name]" id="username" placeholder="請輸入用戶名" />
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<div class="login-input">
?? ??? ??? ??? ??? ?<label>登錄密碼</label>
?? ??? ??? ??? ??? ?<input type="password" name="info[password]" id="password" placeholder="請輸入登錄密碼" />
?? ??? ??? ??? ?</div>
?? ??? ??? ?</div>
?? ??? ??? ?<div id="loginBtn" class="login-button">
?? ??? ??? ??? ?<a href="javascript:void(0)" id="login-button-submit"></a>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ??? ?<!-- 遮蓋層 -->
?? ??? ?<div id="bg" class="login-bg">
?
</div>

css部分:

.login-header>a {
?? ??? ??? ??? ?position: fixed;
?? ??? ??? ??? ?top: 20px;
?? ??? ??? ??? ?left: 40%;
?? ??? ??? ??? ?font-size: 30px;
?
?? ??? ??? ?}
?
?? ??? ??? ?.login {
?? ??? ??? ??? ?display: none;
?? ??? ??? ??? ?width: 512px;
?? ??? ??? ??? ?height: 280px;
?? ??? ??? ??? ?position: fixed;
?? ??? ??? ??? ?border: 1px solid #EBEBEB;
?? ??? ??? ??? ?left: 50%;
?? ??? ??? ??? ?top: 50%;
?? ??? ??? ??? ?background-color: #fff;
?? ??? ??? ??? ?box-shadow: 0 0 20px #ddd;
?? ??? ??? ??? ?z-index: 999;
?? ??? ??? ??? ?transform: translate(-50%, -50%);
?? ??? ??? ?}
?
?? ??? ??? ?.login-title {
?? ??? ??? ??? ?width: 100%;
?? ??? ??? ??? ?margin: 10px 0 0 0;
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?line-height: 40px;
?? ??? ??? ??? ?height: 40px;
?? ??? ??? ??? ?position: relative;
?? ??? ??? ??? ?cursor: move;
?? ??? ??? ?}
?
?? ??? ??? ?.login-input-content {
?? ??? ??? ??? ?margin-top: 20px;
?? ??? ??? ?}
?
?? ??? ??? ?.login-button {
?? ??? ??? ??? ?width: 50%;
?? ??? ??? ??? ?margin: 30px auto 0 auto;
?? ??? ??? ??? ?line-height: 40px;
?? ??? ??? ??? ?font-size: 14px;
?? ??? ??? ??? ?border: 1px solid #EBEBEB;
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ?}
?
?? ??? ??? ?.login-bg {
?? ??? ??? ??? ?display: none;
?? ??? ??? ??? ?width: 100%;
?? ??? ??? ??? ?height: 100%;
?? ??? ??? ??? ?position: fixed;
?? ??? ??? ??? ?top: 0;
?? ??? ??? ??? ?left: 0;
?? ??? ??? ??? ?background: rgba(0, 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;
?? ??? ??? ??? ?width: 350px;
?? ??? ??? ??? ?border: 1px solid #EBEBEB;
?? ??? ??? ??? ?text-indent: 5px;
?? ??? ??? ?}
?
?? ??? ??? ?.login-input {
?? ??? ??? ??? ?overflow: hidden;
?? ??? ??? ??? ?margin: 0 0 20px 40px;
?? ??? ??? ?}
?
?? ??? ??? ?.login-input label {
?? ??? ??? ??? ?float: left;
?? ??? ??? ??? ?width: 90px;
?? ??? ??? ??? ?padding-right: 10px;
?? ??? ??? ??? ?line-height: 35px;
?? ??? ??? ??? ?height: 35px;
?? ??? ??? ??? ?font-size: 14px
?? ??? ??? ?}
?
?? ??? ??? ?.login-title span {
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ??? ?font-size: 12px;
?? ??? ??? ??? ?right: -10px;
?? ??? ??? ??? ?top: -30px;
?? ??? ??? ??? ?background-color: #fff;
?? ??? ??? ??? ?border: 1px solid #ebebeb;
?? ??? ??? ??? ?width: 40px;
?? ??? ??? ??? ?height: 40px;
?? ??? ??? ??? ?border-radius: 20px;
?? ??? ??? ?}

javascript部分:

//1.獲取元素
var login = document.querySelector('.login');
//遮蓋層
var mark = document.querySelector('.login-bg');
// 顯示按鈕
var link = document.querySelector('#link');
//關(guān)閉按鈕
var closeBtn = document.querySelector('#closeBtn');
//在title區(qū)域按下鼠標(biāo)才可以拖動
var title = document.querySelector('#title')
?
// 2.點(diǎn)擊彈出層這個鏈接link ?讓mark 和login 顯示出來?? ?
link.addEventListener('click', function() {
?? ??? ??? ?mark.style.display = 'block'
?? ??? ??? ?login.style.display = 'block'
?? ??? ?})
?
?? ??? ?// 3.點(diǎn)擊彈出層這個關(guān)閉按鈕closeBtn ?讓mark 和login 隱藏起來
?? ??? ?closeBtn.addEventListener('click', function() {
?? ??? ??? ?mark.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)移動的時候，把鼠標(biāo)在頁面中的坐標(biāo) 減去 鼠標(biāo)在盒子中的坐標(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)事件移除
?? ??? ??? ?document.addEventListener('mouseup', function(e) {
?? ??? ??? ??? ??? ?document.removeEventListener('mousemove', move)
?? ??? ??? ?})
?? ??? ?})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: