使用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 相关文章推荐
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
基于jquery可配置循环左右滚动例子
Sep 09 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
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
easyui的tabs update正确用法分享
2014/03/21 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
php生成二维码
2015/08/10 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
Python如何快速实现分布式任务
2017/07/06 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
儿童编程python入门
2018/05/08 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
python format 格式化输出方法
2018/07/16 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
信息技术培训感言
2014/03/06 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
教师节演讲稿
2014/05/06 职场文书
教师学习心得体会范文
2016/01/21 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android