使用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 相关文章推荐
重定向实现代码
Nov 20 Javascript
javascript 获取图片颜色
Apr 05 Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
6种javascript显示当前系统时间代码
Dec 01 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
Vue父组件如何获取子组件中的变量
Jul 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第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
Django视图扩展类知识点详解
2019/10/25 Python
python3 实现调用串口功能
2019/12/26 Python
存储过程和函数的区别
2013/05/28 面试题
先进德育工作者事迹材料
2014/01/24 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
消防安全宣传口号
2014/06/10 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
春节超市活动方案
2014/08/14 职场文书
民间借贷协议书范本
2014/10/01 职场文书
个人合作协议范本
2015/08/06 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
《静夜思》教学反思
2016/02/17 职场文书
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技