使用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 相关文章推荐
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
Dec 05 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
jquery中键盘事件小结
Feb 24 Javascript
Yarn的安装与使用详细介绍
Oct 25 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
vue环境搭建简单教程
Nov 07 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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 IP及IP段进行访问限制的代码
2008/12/17 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
基于JQUERY的多级联动代码
2012/01/24 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
Python迭代和迭代器详解
2016/11/10 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
煤矿班组长岗位职责
2013/12/29 职场文书
公司演讲稿开场白
2014/08/25 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
工作自我评价范文
2015/03/05 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang