使用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 相关文章推荐
限制文本字节数js代码
Mar 06 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
vue如何从接口请求数据
Jun 22 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 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实现的获取URL信息的类
2007/01/02 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
php微信开发之谷歌测距
2018/06/14 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
python异步任务队列示例
2014/04/01 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
Flask之请求钩子的实现
2018/12/23 Python
Python List cmp()知识点总结
2019/02/18 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
优秀员工自荐书
2013/12/19 职场文书
实习单位接收函
2014/01/11 职场文书
个人求职信范例
2014/01/29 职场文书
学生自我评价范文
2014/02/02 职场文书
百日安全活动总结
2014/05/04 职场文书
机械专业技术员求职信
2014/06/14 职场文书
研究生求职自荐书
2014/06/23 职场文书
参观邀请函范文
2015/02/02 职场文书