首页 > 文章 > web前端 > js实现模态窗口增加与删除案例分享（纯代码）
js实现模态窗口增加与删除案例分享（纯代码）

php是最好的语言原创: 2018-08-01 09:48:091719浏览
对于js中ShowModalDialog(模态窗口)的详细使用，如何实现增加与删除？我是用代码给了大家解释，由于时间原因没有写多余的文字，有特别需要的地方，我加了注释。
<!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">&times;</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">&times;</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(&#39;box&#39;);
    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 == &#39;&#39;) {
			alert(&#39;请输入您的姓名&#39;);
			return;
		}
		if (_content == &#39;&#39;) {
			alert(&#39;请输入您的留言&#39;);
			return;
		}

		var sensitiveWords = [&#39;共产党&#39;, &#39;土匪&#39;, &#39;呵呵&#39;];
		sensitiveWords.forEach(function (v) {
				while(_content.indexOf(v) !== -1) {
					_content = _content.replace(v, &#39;***&#39;);
				}
			});
	// 取消发布
	
	//限制字数为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(&#39;li&#39;);
	newLi.innerHTML = &#39;<a href="javascript:;" class="delete">&times;</a>&#39; + &#39;<p class="username">&#39; + _username + &#39;</p><p>&#39; + _content + &#39;</p>&#39;;
	uls.appendChild(newLi); 
	username.value = &#39;&#39;;
	content.value = &#39;&#39;;
    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 + &#39;px&#39;;
			reset.style.top = top + &#39;px&#39;;
		};
		document.onmouseup = function () {
			document.onmousemove = null;
			document.onmouseup = null;
			//取消捕获事件
			if(reset.releaseCapture){
				reset.releaseCapture();
			}
		};
	};
};


var uls = document.getElementById(&#39;uls&#39;);

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实现模态窗口增加与删除案例分享（纯代码）

相关文章
