拖拽对话框案例 发表于 2018-09-05 | 更新于: 2018-09-25 | 分类于 JavaScript | | 热度 ℃ 重点1.点击事件2.样式的改变3.鼠标事件4.client系列运用5.offset系列 效果图 案例代码Css12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667/* 点击字 */.top { text-align: center; font-size: 34px; cursor: pointer}/* 背景遮罩层 */.bg { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: #000; filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; display: none;}/* 登录框 */.dl { width: 500px; height: 250px; background-color: #fff; position: fixed; top: 200px; left: 50%; transform: translateX(-50%); display: none; z-index: 999; text-align: center; position: relative; padding: 10px;}.gb { width: 35px; line-height: 35px; border-radius: 50%; border: 1px solid #ccc; background-color: #fff; position: absolute; top: -10px; right: -10px; cursor: pointer;}h3 { cursor: move; font-weight: normal;}.yh input { display: inline-block; width: 350px; height: 35px; margin: 10px 0;}.yh .txt { margin-right: 15px;}.hy{ width: 200px; line-height: 35px; border: 1px solid #ccc; margin: 10px auto;} Html12345678910111213141516171819202122232425 <div class="wrap"> <div class="top"> 点击,弹出登陆框! </div> </div> <!-- 登陆框 --> <div class="dl"> <div class="gb"> 关闭 </div> <h3>会员登陆</h3> <div class="yh">用户名:<input type="text" placeholder="请输入用户名"><br>登陆密码:<input type="text" placeholder="请输入登陆密码" class="txt"> </div> <div class="hy"> 登陆会员 </div> </div> <!-- 遮罩层 --> <div class="bg"> </div> Js1234567891011121314151617181920212223242526272829303132333435363738394041window.onload = () => { let dj = document.querySelector(".top"); let bg = document.querySelector(".bg"); let dl = document.querySelector(".dl"); let gb = document.querySelector(".gb"); let h = document.querySelector("h3"); dj.onclick = e => { bg.style.display = "block"; dl.style.display = "block"; // window.event.cancelBubble = true; e.stopPropagation(); };// document.onclick = () => {// bg.style.display = "none";// dl.style.display = "none";// }; gb.onclick = () => { bg.style.display = "none"; dl.style.display = "none"; }; h.onmousedown = e => { // 获取此时可视区域的横坐标 let spaceX = e.clientX - dl.offsetLeft; let spaceY = e.clientY - dl.offsetTop; // 移动事件 document.onmousemove = e => { let x = e.clientX - spaceX; let y = e.clientY - spaceY; dl.style.left = x + "px"; dl.style.top = y + "px"; }; }; document.onmouseup = () => { document.onmousemove = null; }}; -------------本文结束感谢您的阅读-------------