简单了解JavaScript弹窗实现代码
功能
点击写点什么弹窗,可以输入文字。
关闭弹窗时自动保存,并且将弹窗内容转换为段落中的文字。
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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。