使用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实现的论坛常用的运行代码的效果
Jul 15 Javascript
[推荐]javascript 面向对象技术基础教程
Mar 03 Javascript
javascript 数组排序函数
Aug 20 Javascript
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
小程序双头slider选择器的实现示例
Mar 31 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
php 邮件发送问题解决
2014/03/22 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
php比较相似字符串的方法
2015/06/05 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
VBScript版代码高亮
2006/06/26 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
javascript如何创建对象
2016/08/29 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
浅谈js闭包理解
2019/04/01 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
python如何查看系统网络流量的信息
2016/09/12 Python
Python 转义字符详细介绍
2017/03/21 Python
python文件名和文件路径操作实例
2017/09/29 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
责任心演讲稿
2014/05/14 职场文书
房展策划方案
2014/06/07 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
如何做好工作总结!
2019/04/10 职场文书