html,CSS,javascript 做一个弹窗
弹窗的工作原理：在网页中写一个div ,布局到想要显示的位置，将display设为none，隐藏该div。然后通过点击事件或其他操作，利用Js代码，将display设置为block，将div 显示到网页中。
Tips:display:none//隐藏 display: block//显示
效果图：点击弹出一个弹窗按钮，显示弹窗内容
代码：
<!doctype html>
<html>
<head>
<title>弹窗练习</title>
<meta charset="utf-8">
<style>
.btn-pop{
background-color: #ffd475;
border-radius: 10px;
border:0px;
zoom:200%; }
#background-pop{
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
#div-pop{
background:#ffffff;
width:30%;
z-index: 1;
margin: 12% auto;
overflow: auto;
}
.div-top{
width: 100%;
height: auto;
background-color: #28a3e7;
color: #ffffff;
}
.div-top div{
padding: 3px 5px 5px 8px;
}
span{
color: white;
margin-bottom: 10px ;
margin-left: 20px ;
cursor: pointer;
float: right;
}
.div-content{
width: auto;
height: 200px;
overflow: auto;
}
.div-footer{
text-align: center;
background-color: darkgray;
}
</style>
</head>
<body>
<button class="btn-pop" onclick="show()">弹出一个窗口</button>
<div id="background-pop">
<div id="div-pop">
<div class="div-top">
<span id="close-button">×</span>
<div>弹窗顶部(可以写个标题)</div>
</div>
<div class="div-content">
放点内容进来<br>
点击灰色位置和右上角x关闭弹窗
</div>
<div class="div-footer">
底部内容
</div>
</div>
</div>
</body>
<script>
var div = document.getElementById('background-pop');
var close = document.getElementById('close-button');
function show(){
div.style.display = "block";
}
close.onclick = function close() {
div.style.display = "none";
}
window.onclick = function close(e) {
if (e.target == div) {
div.style.display = "none";
}
}
</script>
</html>
代码：内容同上，多加了详细注释
<!doctype html>
<html>
<head>
<title>弹窗练习</title>
<meta charset="utf-8">
<style> <!-- css样式 -->
.btn-pop{ <!-- class选择器btn-pop添加样式 -->
background-color: #ffd475; <!-- 设置背景颜色 -->
border-radius: 10px; <!-- 按钮设置个圆角 -->
border:0px; <!-- 去掉边框 -->
zoom:200%; <!-- 按钮变大两倍 --> }
#background-pop{ <!-- id选择器background-pop添加样式 -->
display: none; <!-- 设置隐藏 -->
position: fixed; <!-- 相对于浏览器窗口的绝对定位，absolute 相对于屏幕 -->
left: 0; <!-- 窗口距离右端 -->
top: 0; <!-- 窗口距离顶部 -->
width: 100%; <!-- 宽 100% 填充整个窗口 -->
height: 100%; <!-- 高 -->
background-color: rgba(0,0,0,0.5); <!-- 设置北京颜色(red,green,blue alpha) -->
}
#div-pop{ <!-- id选择器 -->
background:#ffffff; <!-- 背景色 -->
width:30%; <!-- 宽 -->
z-index: 1; <!-- 设置堆叠顺序，参数大的在前，默认为0 -->
margin: 12% auto; <!-- 外边距 -->
overflow: auto; <!-- 超过设置大小固定时，超过时，以滚动条显示 -->
}
.div-top{ <!-- class选择器div-top -->
width: 100%; <!-- 宽 -->
height: auto; <!-- 高 默认高度随内部元素高度变化 -->
background-color: #28a3e7; <!-- 背景颜色 -->
color: #ffffff; <!-- 字体颜色 -->
}
.div-top div{ <!-- class选择器div-top 中的div设置样式 -->
padding: 3px 5px 5px 8px; <!-- 内边距 ：上 右 下 左， -->
}
span{ <!-- span标签添加样式 -->
color: white; <!-- 颜色 -->
margin-bottom: 10px ; <!-- 底部外边距 -->
margin-left: 20px ; <!-- 左侧外边距 -->
cursor: pointer; <!-- 鼠标指到此处显示为手行 -->
float: right; <!-- 浮动：靠右 -->
}
.div-content{ <!-- class选择器div-content -->
width: auto; <!-- 宽 -->
height: 200px; <!-- 高 固定值 -->
overflow: auto; <!-- 加滚动 -->
}
.div-footer{ <!-- class选择器 -->
text-align: center; <!-- 文字居中 -->
background-color: darkgray; <!-- 背景色 -->
}
</style>
</head>
<body>
<button class="btn-pop" onclick="show()">弹出一个窗口</button> <!-- 添加一个按钮 ，onclick事件，点击调用JavaScript中的 show()函数-->
<div id="background-pop"> <!-- 设置id 以便操作和添加样式 -->
<div id="div-pop"> <!-- 弹窗对应的div -->
<div class="div-top"> <!-- 弹窗顶部对应的div -->
<span id="close-button">×</span>
<div>弹窗顶部(可以写个标题)</div>
</div>
<div class="div-content"> <!-- 弹窗中间对应的div -->
放点内容进来<br>
点击灰色位置和右上角x关闭弹窗
</div>
<div class="div-footer"> <!-- 弹窗底部对应的div -->
底部内容
</div>
</div>
</div>
</body>
<!-- 弹窗的js -->
<script>
var div = document.getElementById('background-pop'); //声明 div,通过元素id获取节点，为了后续对id选择器background-pop对应的样式进行操作
var close = document.getElementById('close-button'); //声明 close 通过元素id获取节点，以便为close添加onclick事件
function show(){ //函数show()将background-pop中的display属性设置为block ，使隐藏的div显示
div.style.display = "block";
}
close.onclick = function close() { // 点击窗口右上角 ×关闭弹窗；将background-pop中的display属性设置为none ，使其隐藏
div.style.display = "none";
}
window.onclick = function close(e) {//点击页面中灰色部分关闭弹窗；将background-pop中的display属性设置为none ，使其隐藏
if (e.target == div) {
div.style.display = "none";
}
}
</script>
</html>
over!!
html,CSS,javascript 做一个弹窗的更多相关文章
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 在开始之前,你需要了解一些基本的知识,不要求你能掌握,但是了解一下还是有益的: HTML 简 ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 03
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我还想使用表格,做一个这样的颜色表,如下图所示: 如果按照之前的做法,把每一种颜色都列 ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我想使用表格,做一个这样的颜色表,如下图所示: 例 3:我们参照上图,基于上一个例子, ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表（目录）
HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01 HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02 HT ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 04
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 目前,我们已经将一些行和列插入到表格中,并设置单元格的背景颜色,显示 RGB 值等. 例 7 ...
- 使用Canvas和JavaScript做一个画板
本文同步于个人博客:https://zhoushuo.me/blog/2018/03/11/drawing-borad/ 前些天学习了HTML5的<canvas>元素,今天就来实践一下,用 ...
- 用javascript做一个视频播放器
以前我们在网页上播放视频,都是要麻烦flash来实现.看着那一大段的<object>真心觉得累.随着html5的不断普及,现在是时候使用html5提供的video元素来做点正经事了,但是要 ...
- 【CSS】333- 使用CSS自定义属性做一个前端加载骨架
点击上方"前端自习课"关注,学习起来~ 我们在打开APP或者网站的时候,经常可以看到这样的效果,在内容加载完成之前,会有一个骨架动画的出现,这种加载方式比传统的进度条方式要友好的多 ...
- 如何用JavaScript做一个可拖动的div层
可拖动的层在Web设计中用处很多,比如在某些需要自定义风格布局的应用中,控件就需要拖动操作,下面介绍一个,希望可以满足你的需求,顺便学习一下可拖动的层是如何实现的. 下面是效果演示: 这个DIV可以移 ...
随机推荐
- 深入理解JVM虚拟机：（一）Java运行时数据区域
概述 JVM是Java语言的精髓所在,因为它Java语言实现了跨平台运行,以及自动内存管理机制等,本文将从概念上介绍JVM内存的各个区域,说明个区域的作用. JVM运行时数据区模型 Java虚拟机在执 ...
- Openfire 单人聊天和多人聊天（发送消息、接收消息）
Openfire 单人聊天和多人聊天(发送消息.接收消息) 一.单人聊天 1)发送消息: 首先要获取一个聊天窗口,getConnection()为获取连接connection的方法,调用getFrie ...
- 程序猿必备的8款web前端开发插件三
1.HTML5 Canvas 3D波浪翻滚动画 之前我们分享过好几款基于HTML5 Canvas的波浪和水波纹动画,比如这款HTML5 3D波浪起伏动画特效和这款超酷无比的HTML5 WebGL水面水 ...
- fastDFS 命令笔记
端口开放 这是命令运行的前提 iptables -I INPUT -p tcp -m state –state NEW -m tcp –dport 22 -j ACCEPT iptables -I I ...
- vue实例-转载
http://blog.csdn.net/yuanyuanispeak/article/details/73526795
- SAP从入门到精通 知识体系
初步认识 SAP标准课程培训 详细信息点击: SAP从入门到精通课程 标准培训主要是基于SAP标准的课程架构,定期在SAP的培训中心面向广大SAP客户开设公开课.培训过程中会应用SAP标准的教材内容, ...
- (原)ffmpeg过滤器开发和理解
最近学习了ffmpeg关于filter过滤器的开发,关于中间的几个相关概念,我们先放在简单介绍一下: AVFilterGraph:几乎完全等同与directShow中的fitlerGraph,代表一串 ...
- C#高阶与初心：（一）List.Add添加的到底是什么？
前几日与同事讨论一个相对复杂的场景,需要先将中间过程存储在List中,稍后再用.同时程序类的许多线程共用了一个全局变量. 具体来说就是如下代码 ... _order = order1; _list.A ...
- PHP5.5+ APC 安装
因php 语言特性(短链接), 没法实现共享内存来提升性能. apc的出现给出了一个解决方案 .不过很可惜5.5+以后PHP官方已经废弃掉这个扩展. 幸好出现了 apcu扩展提供后续功能 api 也没 ...
- Go学习笔记（五）Go命令工具
上篇Go学习笔记(四)Go自动化测试框架 1.go build 这个命令可以直接使用,也可以带上代码包或源码文件使用. 如果是直接使用,表示试图编译当前目录所对应的代码包,如果当前目录不是一个有效的代 ...