使用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 相关文章推荐
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
JS 基本概念详细介绍
Oct 16 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设计模式 Strategy(策略模式)
2011/06/26 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
跟老齐学Python之模块的加载
2014/10/24 Python
用python读写excel的方法
2014/11/18 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
python多线程实现TCP服务端
2019/09/03 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
pandas的resample重采样的使用
2020/04/24 Python
Linux操作面试题
2015/02/11 面试题
Python里面如何拷贝一个对象
2014/02/17 面试题
护理学专业推荐信
2013/12/03 职场文书
女方回门宴答谢词
2014/01/14 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
python实现双向链表原理
2022/05/25 Python