使用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 相关文章推荐
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
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
Symfony2创建页面实例详解
2016/03/18 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
python利用datetime模块计算时间差
2015/08/04 Python
详解Python中的变量及其命名和打印
2016/03/11 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
Python如何计算语句执行时间
2019/11/22 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
法制宣传标语
2014/06/23 职场文书
七夕活动策划方案
2014/08/16 职场文书
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技