简单的功能,涉及到拖拽,鼠标按住弹出框标题,实现拖拽到任意位置,关闭弹出框,再次点击添加,弹出框位置不变。
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
user-select: none;
}
.box {
width: 800px;
height: 500px;
background: gray;
margin: 50px auto;
position: relative;
overflow-x:hidden;
}
.mengban {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
position: absolute;
z-index: 1;
left: 0;
top: 0;
display: none;
}
.box2 {
position: absolute;
width: 158px;
height: 80px;
background: yellow;
z-index: 2;
/* border: 1px solid #000000; */
display: none;
left: 321px;
top: 210px;
}
.x {
position: absolute;
right: 10px;
top: 0;
}
p {
text-align: center;
}
.sure {