简单了解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 相关文章推荐
监控 url fragment变化的js代码
Apr 19 Javascript
原创javascript小游戏实现代码
Aug 19 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
JS实现点击掉落特效
Jan 29 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
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
python基于itchat模块实现微信防撤回
2019/04/29 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
本科生详细的自我评价
2013/09/19 职场文书
中国文明网签名寄语
2014/01/18 职场文书
前厅部经理岗位职责范文
2014/02/04 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
2015大一新生军训感言
2015/08/01 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
基于Python的EasyGUI学习实践
2021/05/07 Python
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫