使用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 call方法使用说明
Jan 11 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
在实例中重学JavaScript事件循环
Dec 03 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下将XML转换为数组
2010/01/01 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
js类式继承的具体实现方法
2013/12/31 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
vue-axios使用详解
2017/05/10 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
wxPython框架类和面板类的使用实例
2014/09/28 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
python文本数据相似度的度量
2018/03/12 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
使用npy转image图像并保存的实例
2020/07/01 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
大学生家政服务项目创业计划书
2014/01/30 职场文书
原材料检验岗位职责
2014/03/15 职场文书
安踏广告词改编版
2014/03/21 职场文书
公司任命书范本
2014/06/04 职场文书
企业安全标语
2014/06/07 职场文书
商务代表岗位职责
2015/02/15 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
我收到了德劲DE1107
2022/04/05 无线电