使用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 OOP包机制,类创建的方法定义
Nov 02 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
js实现加载更多功能实例
Oct 27 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
a标签调用js的方法总结
Sep 05 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
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验证码代码
2012/02/27 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
PDO::quote讲解
2019/01/29 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
PHP 裁剪图片
2021/03/09 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
js取得url地址参数实例
2013/02/22 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
python测试驱动开发实例
2014/10/08 Python
Python数据操作方法封装类实例
2017/06/23 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
简单了解python代码优化小技巧
2019/07/08 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
如何获取某个日期是当月的最后一天
2013/12/05 面试题
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
周鸿祎:教你写创业计划书
2013/12/30 职场文书
保护环境倡议书500字
2014/05/19 职场文书
2014年党支部承诺书
2014/05/30 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
法律意见书范文
2015/06/04 职场文书
湘江北去观后感
2015/06/15 职场文书