suchen

Heim  >  Artikel  >  Web-Frontend  >  js-Implementierung zum Hinzufügen und Löschen modaler Windows-Fallfreigabe (reiner Code)

js-Implementierung zum Hinzufügen und Löschen modaler Windows-Fallfreigabe (reiner Code)

php是最好的语言
php是最好的语言Original
2018-08-01 09:48:091719Durchsuche

Wie füge ich ShowModalDialog (modales Fenster) in js im Detail hinzu und lösche es? Ich habe es Ihnen im Code erklärt und bei Bedarf keinen zusätzlichen Text geschrieben. 

<!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 );
	}
};

Verwandte Artikel:

Javascript zum dynamischen Hinzufügen und Löschen von Tabellenzeilen (kompatibel mit IE/FF)

JS-Implementierung des Bestätigungs-Popup-Fensters beim Löschen

Verwandte Videos:

Video-Tutorial für abstrakte JS-Klassen- und Event-Designmuster

Das obige ist der detaillierte Inhalt vonjs-Implementierung zum Hinzufügen und Löschen modaler Windows-Fallfreigabe (reiner Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verständnis von Objekten, die nicht in der Prototypenkette verwendet werden können, und ausführliche Diskussion der JS-PrototypenketteNächster Artikel：Verständnis von Objekten, die nicht in der Prototypenkette verwendet werden können, und ausführliche Diskussion der JS-Prototypenkette

In Verbindung stehende Artikel

Mehr sehen