1：完成留言效果 2：完成拖动标题控制弹框拖拽 3 : 给弹框添加一个自定义的右键菜单

Posted 2020-08-05

css部分

*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
position: relative;
}
li{
margin-top: 10px;
list-style: none;
border-bottom: 1px dashed #ccc;
}
#box{
width: 500px;
border: 2px solid #ccc;
padding: 30px;
}
#btn{
margin-top: 20px;
margin-left: 40px;
}
#cover{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.4;
filter:alpha(opacity = 40);
}
#div{
width: 400px;
height: 300px;
position: absolute;
left: 450px;
top: 300px;
color: #000;
background: #fff;
}
#title{
padding: 10px;
background: #CCCCCC;
overflow: hidden;
cursor: move;
}
#title h3{
display: block;
width: 300px;
float: left;
}
#title #close{
display: block;
width: 20px;
height: 20px;
cursor: pointer;
float: right;
color: red;
font-size: 18px;
font-weight: bold;
}
#text{
display: block;
width: 298px;
height: 200px;
border: 1px solid #ccc;
margin-left: 50px;
margin-top: 10px;
}
#sub{
margin-left: 180px;
margin-top: 10px;
cursor: pointer;
}
#right{
position: absolute;
width: 200px;
height: 300px;
background: red;
display: none;
}

 

html部分

<div id="box">
<ul id="list">
<li>1</li>
<li>2</li>
</ul>
<input type="button" id="btn" value="发布留言" />
</div>
<div id="cover">
<div id="div">
<div id="title">
<h3>请输入留言信息</h3>
<span id="close">x</span>
</div>
<textarea id="text"></textarea>
<input type="button" id="sub" value="确认发布" />
</div>
</div>
<div id="right">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>

 

 

js部分

window.onload = function(){
var oTitle = document.getElementById("title");
var oDiv = document.getElementById("div");
oTitle.onmousedown = function(ev){
ev = ev || evevt;
var x = ev.clientX - oDiv.offsetLeft;
var y = ev.clientY - oDiv.offsetTop;
document.onmousemove = function(ev1){
var x1 = ev1.clientX - x + ‘px‘;
var y1 = ev1.clientY - y + ‘px‘;
oDiv.style.left = x1;
oDiv.style.top = y1;
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
var oBtn = document.getElementById("btn");
var oList = document.getElementById("list");
var oText = document.getElementById("text");
var oSub = document.getElementById("sub");
var oCover = document.getElementById("cover");
var oClose = document.getElementById("close");
oBtn.onclick = function(){
oCover.style.display = ‘block‘;
}
oClose.onclick = function(){
oText.value = ‘‘;
oCover.style.display = ‘none‘;
}
oSub.onclick = function(){
var oLi = document.createElement(‘li‘);
oLi.innerHTML = oText.value;
oList.appendChild(oLi);
oText.value = ‘‘;
oCover.style.display = ‘none‘;
}
var oRight = document.getElementById("right")
oCover.oncontextmenu = function(ev){
ev = ev || event;
oRight.style.display = ‘block‘;
oRight.style.top = ev.clientY + ‘px‘;
oRight.style.left = ev.clientX + ‘px‘;
return false;
}
var oBox = document.getElementById("box");
oBox.oncontextmenu = function(ev){
ev = ev || event;
oRight.style.display = ‘block‘;
oRight.style.top = ev.clientY + ‘px‘;
oRight.style.left = ev.clientX + ‘px‘;
return false;
}
}