原生js手写一个可拖动的模态窗
2021-06-22 本文已影响0人
Peter_2B
<body>
<button class="open test">登录</button>
<div class="model-wrapper">
<div class="model-box">
<div class="title"><span>title</span> <i class="close">x</i></div>
<div class="content">
<div class="form-input">
<label for="username">请输入:</label>
<input type="text" id="username">
</div>
<div class="form-input">
<button>提交</button>
</div>
</div>
</div>
</div>
</body>
*{
padding: 0;
margin: 0;
user-select: none;
box-sizing: border-box;
}
html,body{
width: 100vw;
height: 100vh;
}
button{
width: 100px;
height: 40px;
color: #409eff;
border-radius: 4px;
border: 1px solid #b3d8ff;
background: #ecf5ff;
transition: all 0.15s;
cursor: pointer;
}
button:hover{
color: #fff;
border-color:#409eff;
background: #409eff;
}
button:active{
background: #2b88e4;
}
button.test{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.model-wrapper{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
background: rgba(0,0,0,0.4);
}
.model-wrapper .model-box{
position: absolute;
left: calc(50% - 150px);
top: 100px;
width: 300px;
height: 250px;
border-radius: 5px;
box-shadow: 0 2px 12px rgba(0,0,0,0.2);
background: #ffff;
}
.model-wrapper .model-box .title{
height: 50px;
line-height: 50px;
display: flex;
padding: 0 20px;
justify-content: space-between;
cursor: move;
border-bottom: 1px solid #ddd;
}
.model-wrapper .model-box .title span{
font-size: 18px;
color: #333;
}
.model-wrapper .model-box .title i{
font-style: normal;
font-size: 20px;
color: #ddd;
cursor: pointer;
}
.model-wrapper .model-box .title i:hover{
color: #409eff;
}
.model-wrapper .model-box .content{
padding: 0 20px;
}
.model-wrapper .model-box .content .form-input{
margin: 20px 0;
}
.model-wrapper .model-box .content .form-input label{
font-size: 14px;
cursor: pointer;
}
.model-wrapper .model-box .content .form-input input{
outline: 0;
width: 100%;
height: 42px;
padding: 0 5px;
margin-top: 20px;
border: 1px solid #dcdfe6;
border-radius: 4px;
}
.model-wrapper .model-box .content .form-input input:hover{
border-color: #c0c4cc;
}
.model-wrapper .model-box .content .form-input input:focus{
border-color: #409eff;
}
.model-wrapper .model-box .content .form-input button{
float: right;
margin-top: 10px;
}
<script>
const open = document.querySelector('.open');
const close = document.querySelector('.close');
const modelWrapper = document.querySelector('.model-wrapper');
open.onclick = function() {
modelWrapper.style.display = 'block';
}
close.onclick = function () {
modelWrapper.style.display = 'none';
}
modelWrapper.onclick = function() {
modelWrapper.style.display = 'none';
}
//获取模态框可移动的头部区域
const title = document.querySelector('.title');
//获取模态框主区域
const modelBox = document.querySelector('.model-box');
//取消IE 和 其他浏览器的冒泡事件
modelBox.onclick = function (event) {
window.event ? window.event.cancelBubble = true : event.stopPropagation();
}
title.onmousedown = function(event) {
console.log('1. down时,offsetLeft：', modelBox.offsetLeft);
console.log('2. down时,红A.pageX：', event.pageX);
const x = event.pageX - modelBox.offsetLeft;
const y = event.pageY - modelBox.offsetTop;
document.onmousemove = function(event){
console.log('4. move时,蓝B.pageX:', event.pageX)
modelBox.style.left = event.pageX - x + 'px';
modelBox.style.top = event.pageY - y + 'px';
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
</script>
event.pageX, DOM.offsetLeft等知识参考我另外一篇文章:
https://www.jianshu.com/p/1d15af6d83eb
mousedown,mousemove,mouseup知识参考我另外一篇相关文章:
https://www.jianshu.com/p/100849bfeb0e
