原生js控制控制--弹窗的显示和隐藏
以防浪费大家的时间,还是先上效果图吧,满足您的需求就往下look吧。
重要知识点:点击其他地方,也就是除了小叉子之外的地方也能够关闭弹窗哦。代码已标红
html代码:
<button id="btn" onclick="openframe()">点击弹出</button>
<div id="modal">
<div class="win">
<p>我是弹框中的内容</p>
<span class="close" onclick="closeframe()">×</span>
</div>
</div>
css代码:
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
background-color: #ececec;
}
button{
background-color: transparent;
border: 1px solid dodgerblue;
background-color: #1E90FF;
color: #fff;
border-radius:2px;
margin: 20px 20px;
width: 5%;
cursor: pointer;
}
#modal{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background-color: rgba(0,0,0,.4);
display: none;
z-index: 999;
}
#modal .win{
width: 80%;
height: 120px;
background-color: lightgoldenrodyellow;
margin: 300px auto;
position: relative;
}
.win span{
position: absolute;
right: 5px;
top:-8px;
font-size: 30px;
color: #333;
cursor: pointer;
}
.win p{
padding-top: 50px;
text-align: center;
}
js代码:
var btn=document.getElementById("btn");
var modal=document.getElementById("modal");
var close=document.getElementsByClassName("close");
//点击按钮,弹出弹框
function openframe(){
modal.style.display="block";
}
//点击叉号,关闭弹窗
function closeframe(){
modal.style.display="none";
}
//点击其他地方窗口隐藏
window.onclick=function(e){
if(e.target==modal){
modal.style.display="none";
}
}
每篇随笔必加内容:
小白一枚,如有大神路过请手下留情,多多指教哦。
原生js控制控制--弹窗的显示和隐藏的更多相关文章
- JS控制HTML元素的显示和隐藏
JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...
- 利用来JS控制页面控件显示和隐藏有两种方法
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 document.getEle ...
- 使用JavaScript控制HTML元素的显示和隐藏
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...
- js如何实现点击显示和隐藏表格
js如何实现点击显示和隐藏表格 一.总结 一句话总结: 1.给table或者table里面的元素添加点击事件, 2.然后判断当前表格的数据显示或者隐藏, 3.然后通过display属性显示(非none ...
- 控制HTML元素的显示与隐藏——display和visibility
有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...
- jquery怎么实现点击一个按钮控制一个div的显示和隐藏
示例html 1 2 <div class="abc" style="display:none"></div> <input ty ...
- 使用原生js来控制、修改CSS伪元素的方法总汇, 例如:before和:after
在网页中,如果需要使用辅助性/装饰性的内容的时候,我们不应该直接写在HTML中,这样会影响真正的内容,这就需要使用伪元素了,这是由于css的纯粹语义化是没有意义的.在使用伪元素的时候,会发现js并不真 ...
- 原生 js 模拟 alert 弹窗
复制头部的 js 代码到你的 js 文件的任何地方,调用Chef.alert方法传入相应的参数即可并没有什么功能,只是一个提示的作用,可能样式比 alert 的弹窗好看点,css是写在js里的,只要你 ...
- ExtJS4 自己主动生成控制grid的列显示、隐藏的checkbox
因为某种原因.须要做一个控制grid列显示的checkboxgroup,尽管EXTJS4中的gridpanel自带列表能够来控制列的显示隐藏,可是有这种需求(须要一目了然) 以下先上图 waterma ...
随机推荐
- Selenium学习之==>WebDriver驱动对照表
转自www.imdsx.cn 1.Chrome 对于chrome浏览器,有时候会有闪退的情况,也许是版本冲突的问题,我们要对照着这个表来对照查看是不是webdriver和chrome版本不对. chr ...
- sql type subtype 统计
select * from testtable; type subtype value a sa 1b sb 1a sb errorb sa errora sb 1b sb 1c sa errorc ...
- oracle-控制文件的备份和恢复
本篇将介绍各种备份及恢复控制文件的方法,在介绍恢复时,以备份和重做日志(包括归档日志和在线日志)没有丢失为前提. 无备份情况下的控制文件恢复参考13.3,丢失重做日志的情况请参考12篇“不完全数据库恢 ...
- oracle expdp/impdp/可传输表空间
oracle expdp/impdp/可传输表空间/及一些参数 Oracle data pump 导出操作能够将表.索引.约束.权限.PLSQL包.同义词等对象从数据库导出,并将它们保存在一种非文本格 ...
- 6.824 Lab 3: Fault-tolerant Key/Value Service 3B
Part B: Key/value service with log compaction Do a git pull to get the latest lab software. As thing ...
- 【MM系列】SAP 通过原材料找到成品的函数
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 通过原材料找到成品的函数 ...
- 应用安全 - Web框架 - Apache Flink - 漏洞汇总
SSV ID:SSV-98101 -- 类型: 文件上传导致远程代码执行 flink下载: https://www.apache.org/dyn/closer.lua/flink/flink-1. ...
- Canvas入门07- 自定义实现虚线的绘制
预备知识 直线的斜率 一条直线与某平面直角坐标系x轴正半轴方向的夹角的正切值即该直线相对于该坐标系的斜率. 对于一条直线 y = kx +b,k就是直线的斜率. 斜率的计算 对于一条已知的线段,求斜率 ...
- FastDFS分布式文件服务器
5.分布式文件服务器FastDFS(阿里巴巴) 5.1什么是FastDFS FastDFS 是用 c 语言编写的一款开源的分布式文件系统.FastDFS 为互联网量身定制,充分考虑了冗余备份.负载均衡 ...
- object in javascript
枚举对象属性 for....in 列举obj的可枚举属性,包括自身和原型链上的 object.keys() 只列举对象本身的可枚举属性 创建对象的几种方式 对象字面量 const pre='test' ...