使用js实现关闭js弹出层的窗口

 更新时间:2014年02月10日 09:30:09   作者:   我要评论
本篇文章主要是对使用js实现关闭js弹出层的窗口的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

<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";  //不显示(页面初始化的时候同样加载一遍)
}

相关文章

  • var与Javascript变量隐式声明

    var与Javascript变量隐式声明

    在JavaScript中,var用来声明变量,但是这个语法并不严格要求,很多时修改,我们可以直接使用一个变量而不用var声明它。
    2009-09-09
  • bootstrap是什么_动力节点Java学院整理

    bootstrap是什么_动力节点Java学院整理

    这篇文章主要介绍了bootstrap是什么,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 超全面的JavaScript开发规范(推荐)

    超全面的JavaScript开发规范(推荐)

    作为一名开发人员(WEB前端JavaScript开发),不规范的开发不仅使日后代码维护变的困难,同时也不利于团队的合作,通常还会带来代码安全以及执行效率上的问题。本文就主要介绍了关于Javascript的命名规范、注释规范以及框架开发的一些问题,需要的朋友可以参考学习。
    2017-01-01
  • document.onreadystatechange事件的用法分析

    document.onreadystatechange事件的用法分析

    这里主要介绍document.onreadystatechange事件的使用方法, 一般多用于实时监控用户的输入
    2009-10-10
  • BootStrap模态框和select2合用时input无法获取焦点的解决方法

    BootStrap模态框和select2合用时input无法获取焦点的解决方法

    在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入。怎么解决这个问题呢?下面小编给大家带来了BootStrap模态框和select2合用时input无法获取焦点的解决方法,一起看看吧
    2017-09-09
  • 菜单效果

    菜单效果

    菜单效果...
    2006-10-10
  • javascript  Error 对象 错误处理

    javascript Error 对象 错误处理

    javascript常见error对象处理,错误代码集合
    2008-05-05
  • JavaScript tab选项卡插件实例代码

    JavaScript tab选项卡插件实例代码

    这篇文章主要介绍了JavaScript tab选项卡插件实例代码的相关资料,需要的朋友可以参考下
    2016-02-02
  • 本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结

    本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结

    遇到的本地图片预览的需求,IE6下可以直接从file的value获取图片路径来显示预览,IE7和IE8下通过select获取file的图片路径,再用滤镜来显示预览,至于FireFox祥看本文吧,希望可以帮助到你
    2013-03-03
  • 探究JavaScript函数式编程的乐趣

    探究JavaScript函数式编程的乐趣

    本文是函数式编程系列的第一篇文章,这里我会简要介绍一下编程范式,然后会直接介绍使用Javascript进行函数式编程的概念,需要的朋友可以参考下
    2015-12-12

最新评论