时间:2021-07-01 10:21:17 帮助过:6人阅读
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模态窗口</title> <link rel="stylesheet" href="index.css"> </head> <body> <p id="reset"> <p id="talk">issue<span id="close">×</span></p> <p class="group"><label> name </label> <input type="text" id="username"></p> <p class="group"><label> Please enter content <br /></label><textarea id="content"></textarea></p> <input type="submit" value="confirm" id="btn2"> <input type="submit" value="cancel" id="btn3"> </p> <br /> <p id="box"> <a id="btn">Click tweet</a> <ul id="uls"> <li> <a href="javascript:;" class="delete">×</a> <h4 class="username">致橡树</h4> <p>我如果爱你——绝不像攀援的凌霄花,借你的高枝炫耀自己;我如果爱你——绝不学痴情的鸟儿,为绿荫重复单调的歌曲;也不止像泉源,常年送来清凉的慰藉;也不止像险峰,增加你的高度,衬托你的威仪。甚至日光。甚至春雨。</p> </li> </ul> </p> <script src="index.js"></script> </body> </html> * { margin: 0; padding: 0; } body{ width:100%; background-image: url(img/1.jpg); } ul,li{ list-style: none; } #reset{ display:none; background:#eee; width:500px; height:250px; position:absolute; left:30%; top:35%; } #reset #talk{ width: 100%; height: 35px; background: #ccc; text-align: center; line-height: 35px; font-size: 18px; color: #fff; font-weight: 700; } #talk #close{ position:absolute; right: 5px; top: 0; font-size:20px; width:20px; height:20px; color: #999; cursor:pointer; } #reset .group{ margin: 5px 20px; } #reset .group label{ color: #666; font-size: 14px; } #username { width: 200px; height: 25px; border: 1px solid #eee; outline: none; } #content { width: 460px; height: 110px; border: 1px solid #eee; outline: none; margin-top: 5px; resize: none; } #btn2 { margin-left: 200px; width: 60px; height: 25px; border: 0; border-radius: 5px; background: #ddd; font-size: 14px; color: #666; line-height: 25px; } #btn3 { width: 50px; height: 25px; border: 0; border-radius: 5px; background: #ddd; font-size: 14px; color: #666; padding: 5px; } #box{ margin: 0 auto; width: 1000px; height: auto; background-repeat: no-repeat; background-position: top center; border-radius: 10px; } #box #btn{ display: block; width: 150px; text-align: center; text-decoration: none; color: #00ffba; font-size: 20px; background: #fff; border-radius: 5px; padding: 5px; margin:10px ; cursor: pointer; } #uls{ margin: 20px 10px 0; background: #fff; border-radius: 10px auto 0; } #uls li { padding: 10px 5px; border-bottom: 1px dashed #eee; } #uls li .username { color:#2223218a; padding: 2px 5px; } #uls li p { padding: 10px 10px; color: #aaa; font-size:14px; } #uls li a{ float:right; text-decoration:none; color:#a9a9a9; padding:0px 5px; } window.onload = function () { var box = document.getElementById('box'); var btn = document.getElementById("btn"); var reset = document.getElementById("reset"); var top = document.getElementById("talk"); var close = document.getElementById("close"); var btn2 = document.getElementById("btn2"); var btn3 = document.getElementById("btn3"); btn.onclick=function(){ reset.style.display="block"; }; //关闭弹出页 close.onclick = function(){ reset.style.display="none"; }; btn3.onclick = function(){ reset.style.display = "none"; }; //发布 btn2.onclick = function() { var _username = username.value; var _content = content.value; if (_username == '') { alert('请输入您的姓名'); return; } if (_content == '') { alert('请输入您的留言'); return; } var sensitiveWords = ['共产党', '土匪', '呵呵']; sensitiveWords.forEach(function (v) { while(_content.indexOf(v) !== -1) { _content = _content.replace(v, '***'); } }); // 取消发布 //限制字数为150 function LimitNumber(txt) { var str = txt; str = str.substr(0,150); _content.innerText=str; } if (_content.length>150){ alert("您输入超出限制"); LimitNumber(); } var newLi = document.createElement('li'); newLi.innerHTML = '<a href="javascript:;" class="delete">×</a>' + '<p class="username">' + _username + '</p><p>' + _content + '</p>'; uls.appendChild(newLi); username.value = ''; content.value = ''; reset.style.display="none"; }; // 拖拽 reset.onmousedown = function (ev) { var maxLeft = document.documentElement.clientWidth - reset.offsetWidth; var maxTop = document.documentElement.clientHeight - reset.offsetHeight; var e = ev || window.event; var X = e.clientX - reset.offsetLeft; var Y = e.clientY - reset.offsetTop; //只针对IE浏览器 if(reset.setCapture) { reset.setCapture(); } document.onmousemove = function (ev) { var e = ev || window.event; var left = e.clientX - X; var top = e.clientY - Y; //限定范围 if(left < 0){ left = 0; } if(top < 0){ top = 0; } if(top> maxTop ){ top = maxTop; } if(left > maxLeft ){ left = maxLeft; } reset.style.left = left + 'px'; reset.style.top = top + 'px'; }; document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; //取消捕获事件 if(reset.releaseCapture){ reset.releaseCapture(); } }; }; }; var uls = document.getElementById('uls'); uls.onclick = function (ev) { var e = ev || window.event; var o = e.srcElement || e.target; if(o.nodeName === "A") { uls.removeChild( o.parentNode ); } };
相关文章:
javascript实现动态增加删除表格行(兼容IE/FF)
JS实现删除时的确认弹窗
相关视频:
JS抽象类和事件设计模式视频教程
以上就是js实现模态窗口增加与删除案例分享(纯代码)的详细内容,更多请关注Gxl网其它相关文章!