Maison > Article > interface Web > js implémentation de l'ajout et de la suppression du partage de cas modal sous Windows (code pur)

js implémentation de l'ajout et de la suppression du partage de cas modal sous Windows (code pur)

php是最好的语言original: 2018-08-01 09:48:091718parcourir

Pour l'utilisation détaillée de ShowModalDialog (fenêtre modale) en js, comment l'ajouter et le supprimer ? Je vous l'ai expliqué en code. En raison de contraintes de temps, je n'ai pas écrit de texte supplémentaire, j'ai ajouté des commentaires si nécessaire.

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

Articles associés :

javascript pour ajouter et supprimer dynamiquement des lignes de tableau (compatible avec IE/FF)

Implémentation JS de la fenêtre contextuelle de confirmation lors de la suppression

Vidéos associées :

Tutoriel vidéo sur les modèles de conception de classes abstraites et d'événements JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Compréhension des objets qui ne peuvent pas être utilisés dans la chaîne de prototypes et discussion approfondie de la chaîne de prototypes JSArticle suivant：Compréhension des objets qui ne peuvent pas être utilisés dans la chaîne de prototypes et discussion approfondie de la chaîne de prototypes JS

Articles Liés

Voir plus