使用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 相关文章推荐
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
详解JS模块导入导出
Dec 20 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
redux.js详解及基本使用
May 24 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在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
js实现简单页面全屏
2019/09/17 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
python基础教程之类class定义使用方法
2014/02/20 Python
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
浅谈Python中的字符串
2020/06/10 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
银行存款证明样本
2014/01/17 职场文书
代领报检证委托书范本
2014/10/11 职场文书
银行员工考核评语
2014/12/31 职场文书
2015年考研复习计划
2015/01/19 职场文书
茶花女读书笔记
2015/06/29 职场文书
宿舍管理制度范本
2015/08/07 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
创业计划书之面包店
2019/09/17 职场文书
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python