简单了解JavaScript弹窗实现代码


Posted in Javascript onMay 07, 2020

功能

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

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

low没有下限

实现

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

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

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

代码

html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹窗</title>
<link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" >
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="external nofollow" >
</head>
<body>
	<p id="p1" onclick="writeBlog()">今天想写点什么?</p>
	<div class="open" id="open">
		<div class="open-content">
			<span class="close" id="close" onclick="closeit()"><i class="fa fa-close"></i></span>
			<textarea class="textstyle" id="textstyle" rows="10" cols="90" placeholder="写下生活" ></textarea> 
		</div>
	</div>
</body>
 <script type="text/javascript" src="show.js"></script>
</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: 1px solid #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代码

function writeBlog(){
	var open=document.getElementById("open");
	open.style.display="block";
}
function closeit(){
	var text=document.getElementById("textstyle").value;
	document.getElementById("p1").innerHTML+="<br>"+text;
	document.getElementById("open").style.display="none";
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 简练的几个函数
Aug 29 Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
js实现坦克大战游戏
Feb 24 Javascript
angular组件间传值测试的方法详解
May 07 #Javascript
Node.js API详解之 timer模块用法实例分析
May 07 #Javascript
JS面试题中深拷贝的实现讲解
May 07 #Javascript
javascript 代码是如何被压缩的示例代码
May 06 #Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 #Javascript
Vue SSR 即时编译技术的实现
May 06 #Javascript
深入webpack打包原理及loader和plugin的实现
May 06 #Javascript
You might like
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
php中memcache 基本操作实例
2015/05/17 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
Javascript注入技巧
2007/06/22 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
巴西购物网站:Submarino
2020/01/19 全球购物
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
大学生个人简历自我评价
2013/11/16 职场文书
发展部经理职责规定
2014/02/22 职场文书
建设投标担保书
2014/05/13 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
小学运动会前导词
2015/07/20 职场文书