微客导航 » 文章资讯 » 简单了解JavaScript弹窗实现代码

简单了解JavaScript弹窗实现代码

2023-07-25 18:21:09 311

功能

点击写点什么弹窗，可以输入文字。

关闭弹窗时自动保存，并且将弹窗内容转换为段落中的文字。

low没有下限

实现

step1设置弹窗容器，包含关闭按钮和文本区域，设置display为隐藏（none)，并设置在顶层。

step2设置弹窗按钮（这里是点击段落内容呀），并书写对应的js函数（将弹窗的display显示）。

step3设置关闭按钮的js函数，获取文本并加入到段落中，关闭弹窗（还是display啊）

代码

html代码





弹窗




	今天想写点什么？

CSS代码

/*弹窗(background)*/
.open{
display:none;/*默认隐藏*/
position:fixed;/*固定定位*/
z-index:1;/*设置在顶层*/
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.4);
}

/*弹窗内容*/
.open-content{
background-color:#fefefe;
margin:10%auto;
padding:20px;
border:1pxsolid#888;
width:80%;
}
.textstyle{
	padding:20px;
	margin:10%auto;
}
/*关闭按钮*/
.close{
color:#aaa;
float:right;
font-size:28px;
font-weight:bold;
}

.close:hover,
.close:focus{
color:black;
text-decoration:none;
cursor:pointer;
}

JS代码

functionwriteBlog(){
	varopen=document.getElementById("open");
	open.style.display="block";
}
functioncloseit(){
	vartext=document.getElementById("textstyle").value;
	document.getElementById("p1").innerHTML+="
"+text;
	document.getElementById("open").style.display="none";
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

简单了解JavaScript弹窗实现代码

热门推荐

随机推荐