欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML+CSS+JavaScript實現(xiàn)可拖拽模態(tài)框

 更新時間：2022年07月05日 07:31:59   作者：@半島鐵盒@  
這篇文章主要為大家詳細介紹了HTML+CSS+JavaScript實現(xiàn)可拖拽模態(tài)框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言

模態(tài)框是指覆蓋在父窗口上的子窗口，但在HTML網(wǎng)頁中，并沒有父窗口和子窗口的概念。這里是通過可隱藏的遮罩層和一個可隱藏的盒子來實現(xiàn)模態(tài)框的效果。

效果演示：

下面開始詳細介紹如何實現(xiàn)一個可拖拽的模態(tài)框。只對 JS 部分詳解，HTML 和 CSS 會放在文章底部的源代碼中！

JavaScript詳解

整體效果是由以下幾個事件構成：

  • 點擊立即登錄按鈕，彈出遮罩層和模態(tài)框。
  • 點擊小叉號關閉模態(tài)框和遮罩層。
  • 鼠標在模態(tài)框的標題上按下時，計算鼠標在模態(tài)框中的坐標。
  • 給整個HTML文檔添加鼠標移動事件，通過算法實現(xiàn)模態(tài)框跟隨鼠標移動。
  • 鼠標在HTML文檔中松開時，移除HTML文檔的鼠標移動事件。

首先獲取我們需要操作的元素

let but = document.querySelector('.but') // 立即登錄按鈕
let shade = document.querySelector('.shade') ?// 遮罩層
let loginBox = document.querySelector('.login-box') // 模態(tài)框
let title = document.querySelector('.title') ? ?// 模態(tài)框標題：用戶登錄
let exit = document.querySelector('.exit'); ?// 小叉號

點擊立即登錄按鈕，彈出遮罩層和模態(tài)框。

but.addEventListener('click', function() {
? ? shade.style.display = "block"; ?// 顯示遮罩層
? ? loginBox.style.display = "block"; ?// 顯示模態(tài)框
});

點擊小叉號關閉模態(tài)框和遮罩層。

exit.addEventListener('click', function() {
? ? shade.style.display = "none"; ?// 隱藏遮罩層
? ? loginBox.style.display = "none"; ?// 隱藏遮罩層
});

鼠標在模態(tài)框標題上按下時計算鼠標在模態(tài)框中的坐標：

title.addEventListener('mousedown', function(event) {
? ? let x = event.pageX - loginBox.offsetLeft;
? ? let y = event.pageY - loginBox.offsetTop;
});

event.pageX 和 event.pageY：獲取鼠標在整個頁面中的 x 坐標、y 坐標。

loginBox.offsetLeft 和 loginBox.offsetTop：獲取模態(tài)框距離頁面左邊和上邊的距離。

通過相減的方式計算出鼠標在模態(tài)框中的坐標。

鼠標在模態(tài)框標題上按下后，再給 document 對象添加鼠標移動事件：

title.addEventListener('mousedown', function(event) {
? ? let x = event.pageX - loginBox.offsetLeft;
? ? let y = event.pageY - loginBox.offsetTop;
? ? document.addEventListener('mousemove', function() {
? ? ? ? // 鼠標移動后的新坐標減去鼠標在模態(tài)框中的坐標，實現(xiàn)模態(tài)框跟隨鼠標移動
? ? ? ? loginBox.style.left = (event.pageX - x)+"px";
? ? ? ? loginBox.style.top = (event.pageY - y)+"px";
? ? });
});

這里為什么不把鼠標移動事件給 title ?

如果把鼠標移動事件給 title 的話，鼠標移動過快，會脫離模態(tài)框，導致模態(tài)框無法跟隨移動。

如果想看效果，把這里的 document 換成 title，然后快速拖動即可，這里不做演示！

到這里已經(jīng)實現(xiàn)了模態(tài)框跟隨鼠標移動，但當我們松開鼠標后，發(fā)現(xiàn)模態(tài)框依舊跟隨鼠標移動。所以，還需要給 document 添加鼠標松開事件。

title.addEventListener('mousedown', function(event) {
? ? let x = event.pageX - loginBox.offsetLeft;
? ? let y = event.pageY - loginBox.offsetTop;
? ? document.addEventListener('mousemove', loginBoxMove);
? ? // 這里需要把鼠標移動事件函數(shù)寫在外面，因為移除事件監(jiān)聽器時也會用到！
? ? function loginBoxMove(event) {
? ? ? ? loginBox.style.left = (event.pageX - x)+"px";
? ? ? ? loginBox.style.top = (event.pageY - y)+"px";
? ? }
? ? document.addEventListener('mouseup', function() {
? ? ? ? document.removeEventListener('mousemove', loginBoxMove);
? ? })
});

這里為什么不把鼠標松開事件給 title ?

還是會遇到上述類似的情況，大家可以自行嘗試！

源代碼

<!DOCTYPE html>
<head>
? ? <meta charset="UTF-8">
? ? <title>模態(tài)框</title>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? ? letter-spacing: 3px;
? ? ? ? }
? ? ? ? body {
? ? ? ? ? ? background-color: #ffbf84;
? ? ? ? }
? ? ? ? /* 立即登錄按鈕和模態(tài)框水平垂直居中 */
? ? ? ? .but, .login-box {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? transform: translate(-50%, -50%);
? ? ? ? }
? ? ? ? /* 遮罩層 */
? ? ? ? .shade {
? ? ? ? ? ? display: none;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? background-color: rgba(0, 0, 0, .3);
? ? ? ? ? ? /* 這里一定要把遮罩層移到重疊元素的上層，就可以造成父窗口無法操作的效果 */
? ? ? ? ? ? z-index: 1;
? ? ? ? }
? ? ? ? /* 立即登錄按鈕 */
? ? ? ? .but {
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? display: block;
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 60px;
? ? ? ? ? ? border-radius: 30px;
? ? ? ? ? ? box-shadow: 0 10px 10px rgba(10, 20, 20, .2);
? ? ? ? ? ? background-color: #fa8282;
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? font-size: 25px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height: 60px;
? ? ? ? }
? ? ? ? .but:hover {
? ? ? ? ? ? transition: background-color 0.5s;
? ? ? ? ? ? background-color: #f36886;
? ? ? ? }
? ? ? ? /* 模態(tài)框 */
? ? ? ? .login-box {
? ? ? ? ? ? display: none;
? ? ? ? ? ? width: 350px;
? ? ? ? ? ? height: 250px;
? ? ? ? ? ? border: 1px solid rgb(216, 216, 216);
? ? ? ? ? ? border-radius: 10px;
? ? ? ? ? ? box-shadow: 5px 5px 10px rgba(10, 20, 20, .2), -5px -5px 10px rgba(10, 20, 20, .2);
? ? ? ? ? ? background-color: #fff;
? ? ? ? ? ? /* 和遮罩層同理，模態(tài)框一定要在最上層 */
? ? ? ? ? ? z-index: 1;
? ? ? ? }
? ? ? ? .login-box .title {
? ? ? ? ? ? cursor: move;
? ? ? ? ? ? user-select: none; ?/* 禁止用戶選中文字 */
? ? ? ? ? ? position: relative;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 70px;
? ? ? ? ? ? color: #3f3f3f;
? ? ? ? ? ? font-size: 20px;
? ? ? ? ? ? font-weight: 700;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height: 70px;
? ? ? ? }
? ? ? ? .login-box .title .exit {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: -10px;
? ? ? ? ? ? right: 10px;
? ? ? ? ? ? font-size: 30px;
? ? ? ? }
? ? ? ? .login-box .title .exit:hover {
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? text-shadow: 2px 2px 4px rgba(10, 20, 20, .5);
? ? ? ? }
? ? ? ? .login-box form {
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-direction: column;
? ? ? ? ? ? justify-content: center;
? ? ? ? ? ? align-items: center;
? ? ? ? ? ? padding: 10px 0;
? ? ? ? }
? ? ? ? .login-box form .input-box {
? ? ? ? ? ? width: 60%;
? ? ? ? ? ? height: 35px;
? ? ? ? ? ? margin-bottom: 20px;
? ? ? ? ? ? padding: 0px 10px;
? ? ? ? ? ? border: 1px solid #3f3f3f;
? ? ? ? ? ? border-radius: 8px;
? ? ? ? ? ? color: #3f3f3f;
? ? ? ? ? ? font-size: 16px;
? ? ? ? ? ? font-weight: 700;
? ? ? ? }
? ? ? ? .login-box form .input-box:focus {
? ? ? ? ? ? outline: none;
? ? ? ? }
? ? ? ? .login-box form .login-but {
? ? ? ? ? ? width: 120px;
? ? ? ? ? ? height: 35px;
? ? ? ? ? ? border: none;
? ? ? ? ? ? background-color: #fa8282;
? ? ? ? ? ? border-radius: 8px;
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? font-size: 20px;
? ? ? ? ? ? font-weight: 700;
? ? ? ? }
? ? ? ? .login-box form .login-but:hover {
? ? ? ? ? ? background-color: #f36886;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <!-- 遮罩層 -->
? ? <div class="shade"></div>
? ? <!-- 登錄按鈕 -->
? ? <span class="but">立即登錄</span>
? ? <!-- 模態(tài)框 -->
? ? <div class="login-box">
? ? ? ? <div class="title">
? ? ? ? ? ? 用戶登錄
? ? ? ? ? ? <span class="exit">×</span>
? ? ? ? </div>
? ? ? ? <form action="">
? ? ? ? ? ? <input type="text" class="input-box" placeholder="用戶名">
? ? ? ? ? ? <input type="password" class="input-box" placeholder="密碼">
? ? ? ? ? ? <input type="submit" class="login-but" value="登錄">
? ? ? ? </form>
? ? </div>
? ? <script>
? ? ? ? let but = document.querySelector('.but');
? ? ? ? let shade = document.querySelector('.shade');
? ? ? ? let loginBox = document.querySelector('.login-box');
? ? ? ? let title = document.querySelector('.title');
? ? ? ? let exit = document.querySelector('.exit');
?
? ? ? ? // 立即登錄按鈕點擊事件
? ? ? ? but.addEventListener('click', function() {
? ? ? ? ? ? shade.style.display = "block";
? ? ? ? ? ? loginBox.style.display = "block";
? ? ? ? });
?
? ? ? ? // 關閉模態(tài)框事件
? ? ? ? exit.addEventListener('click', function() {
? ? ? ? ? ? shade.style.display = "none";
? ? ? ? ? ? loginBox.style.display = "none";
? ? ? ? });
?
? ? ? ? // 拖動標題區(qū)域可移動模態(tài)框
? ? ? ? title.addEventListener('mousedown', function(event) {
? ? ? ? ? ? // 計算鼠標在登錄框中坐標
? ? ? ? ? ? let x = event.pageX - loginBox.offsetLeft;
? ? ? ? ? ? let y = event.pageY - loginBox.offsetTop;
? ? ? ? ? ? // 給頁面添加鼠標移動事件
? ? ? ? ? ? document.addEventListener('mousemove', loginBoxMove);
? ? ? ? ? ? function loginBoxMove(event) {
? ? ? ? ? ? ? ? loginBox.style.left = (event.pageX - x)+"px";
? ? ? ? ? ? ? ? loginBox.style.top = (event.pageY - y)+"px";
? ? ? ? ? ? }
? ? ? ? ? ? // 鼠標松開后移除頁面的鼠標移動事件
? ? ? ? ? ? document.addEventListener('mouseup', function() {
? ? ? ? ? ? ? ? document.removeEventListener('mousemove', loginBoxMove);
? ? ? ? ? ? })
? ? ? ? });
? ? </script>
</body>
</html>

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

相關文章

最新評論