使用js实现关闭js弹出层的窗口


Posted in Javascript onFebruary 10, 2014

<script type="text/javascript">
function toggle() {
  theObj = document.getElementById('Sunyanzi').style;
  if (  theObj.display == "none" ) theObj.display = "block"; else theObj.display = "none";
}
</script>
<div id="Sunyanzi" style="display:none">你看我出现了~~~</div>
<br />
<input type="button" onclick="toggle()" value="点一下试试看 ...?" />

两种方法:去除和隐藏

//创建你的弹出层  
    var dvMsg = document.createElement("div"); 
    strHtml =  "<div class='####'>弹出层内容</div>"
    strHtml += " <div class='####'><input type='button' value='关闭' onclick='btnclick()'></div>"
    dvMsg.innerHTML = strHtml;   
    document.body.appendChild(dvMsg);
// 关闭按钮    
btnclick = function (){                      
    document.body.removeChild(dvMsg);

-------------------------
或者 弹出层用div id标记

<div id="tanchu">弹出层内容</div>

js里
function open(){
document.getElementById(tanchu).style.display="";  //显示
}
function close(){
document.getElementById(tanchu).style.display="none";  //不显示(页面初始化的时候同样加载一遍)
}

Javascript 相关文章推荐
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
使用javascript插入样式
Mar 14 Javascript
vue文件树组件使用详解
Mar 29 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
vue页面跳转实现页面缓存操作
Jul 22 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 #Javascript
js实现省市联动效果的简单实例
Feb 10 #Javascript
js+div实现图片滚动效果代码
Feb 10 #Javascript
javascript实现数字验证码的简单实例
Feb 10 #Javascript
javascript实现数字+字母验证码的简单实例
Feb 10 #Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 #Javascript
javascript类型转换使用方法
Feb 08 #Javascript
You might like
session 加入redis的实现代码
2016/07/15 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
python求解数组中两个字符串的最小距离
2018/09/27 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
Windows和Linux动态库应用异同
2016/07/28 面试题
12岁生日感言
2014/01/21 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
房屋买卖协议样本
2014/11/16 职场文书
2015年春节标语口号
2014/12/09 职场文书
交通事故责任认定书
2015/08/06 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL