使用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 相关文章推荐
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
jQuery表单验证插件解析(推荐)
Jul 21 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 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
队列在编程中的实际应用(php)
2010/09/04 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
python实现sublime3的less编译插件示例
2014/04/27 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
python中round函数如何使用
2020/06/19 Python
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
歌唱比赛主持词
2014/03/18 职场文书
原告离婚代理词
2015/05/23 职场文书
2016年母亲节广告语
2016/01/28 职场文书
小学美术教学反思
2016/02/17 职场文书