For the detailed use of ShowModalDialog (modal window) in js, how to add and delete it? I explained it to you in code. Due to time constraints, I didn’t write any extra text. I added comments where necessary.
<!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 );
}
};Related articles:
javascript to dynamically add and delete table rows (compatible with IE/FF)
JS implements the confirmation pop-up window when deleting
Related videos:
JS abstract class and event design pattern video tutorial
The above is the detailed content of js implementation of adding and deleting modal windows case sharing (pure code). For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
