js實現模態窗口增加與刪除
本文實例為大傢分享瞭js實現模態窗口增加與刪除的具體代碼,供大傢參考,具體內容如下
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模態窗口</title> <link rel="stylesheet" href="index.css"> </head> <body> <div id="reset"> <div id="talk">issue<span id="close">×</span></div> <div class="group"><label> name </label> <input type="text" id="username"></div> <div class="group"><label> Please enter content <br /></label><textarea id="content"></textarea></div> <input type="submit" value="confirm" id="btn2"> <input type="submit" value="cancel" id="btn3"> </div> <br /> <div 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> </div> <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>' + '<div class="username">' + _username + '</div><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 ); } };
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。