先积累一个JavaScript动态实现div窗口弹出&消失功能

首先是index.jsp代码

<html>

<head>

<link rel="stylesheet" href="css/DivStyle.css" media="screen">

<script type="text/javascript" src="scripts/div.js"></script>

</head>

<body>

    <div id="div" class="div">

        <input type="button" value="关闭" onclick="closeDiv()">

    </div>

    <div>

        <input type="button" value="显示" onclick="showDiv()">

    </div>

</body>

</html>

再次是scripts/div.js的JavaScript代码

//窗口显示函数

function showDiv() {

    //通过doc得到div赋值给变量div

    var div = document.getElementById("div");

    //设置div的属性为block即显示

    div.style.display = "block";//有的博客上为""，在这里不起作用，原因未知

}

//窗口关闭函数

function closeDiv() {

    var div = document.getElementById("div");

    //设置div的属性为none即消失

    div.style.display = "none";

}

css/DivStyle.css代码

@CHARSET "UTF-8";

/*div初始状态是不显示的*/

.div {

    display: none;

    position: absolute;

    color: blue;

    height: 300px;

    width: 500px;

    background: #99FFFF;

}

JavaScript动态实现div窗口弹出&消失功能的更多相关文章

  1. JavaScript实现点击按钮弹出输入框，点确定后添加li组件到ul组件里

    JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...

  2. JavaScript中的三种弹出对话框

    学习过js的小伙伴会发现,我们在一些实例中用到了alert()方法.prompt()方法.prompt()方法,他们都是在屏幕上弹出一个对话框,并且在上面显示括号内的内容,使用这种方法使得页面的交互性 ...

  3. JavaScript中的三种弹出框的区别与使用

    JavaScript中有三种原生的弹出框,分别是alert.confirm.prompt.分别表示弹出框.确认框.信息框. 以下是示例代码: <!DOCTYPE html> <htm ...

  4. JavaScript动态设置div的样式的方法

    有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简 ...

  5. jquery效果 窗口弹出案例

    效果 ①基本效果:show().hide().toggle() ②滑动 slideDown().slideUp().slideToggle() 划上:$("p").slideUp( ...

  6. Div层弹出

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  7. 2016/4/2 json：js和jquery中轻量级数据交换格式 例： 窗口弹出 popwindow

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...

  8. javascript使浏览器关闭前弹出确认

    当用户关闭页面时,弹出对话框,让用户确认是否关闭,选择确定则页面关闭,否则页面不关闭. 效果体验:http://keleyi.com/keleyi/phtml/js/index.htm 完整代码: & ...

  9. asp.net中的窗口弹出实现，包括分支窗口 . ASP.NET返回上一页面实现方法总结 .

    返回上一页的这个东东在我们做项目的时候一般是用于填写完表单后确认的时候,有对原来输入的数据进行修改或者更新时用的,或者是因为网站为了方便浏览者而有心添加的一个东东,一般这种功能的实现在ASP.NET中 ...

随机推荐

  1. text-align：center；在ie7下，父级加上会让block状态的子元素居中。

    text-align:center:在ie7下,父级加上会让block状态的子元素居中.ie8以上不会.

  2. virtual column make sqlserver using function index

    In sqlserver, it is impossible that if we want to create an function index. Doesn`t means we can not ...

  3. 【C++初学者自学笔记一】(把自己刚学到的东西做一下总结，如果有哪些地方不足请留言指正)

    这是我写的第一个博客关于C++的一些笔记,我不会写的太深奥,因为这样很多人会看不懂(我刚开始学C语言深受其害).个人觉得C++这门语言有些类似于C语言但是有些函数的用法还是有不一样的.C语言中的头文件 ...

  4. 科软-信息安全实验2-netfilter实验

    目录 一 前言 二 Talk is cheap, show me the code 三 前期准备 四 效果演示 五 遇到的问题&解决 六 参考资料 七 老师提供的代码 一 前言 文章不讲解理论 ...

  5. 在WAMP环境下搭建ZendDebugger php调试工具的方法

    东西不是新货,所以介绍就不做介绍了,下面主要是配置流程. 首先,下载ZendDebugger,下载链接:http://downloads.zend.com/pdt/server-debugger/,因 ...

  6. iOS项目Info.plist中关键字汇总

    1. Application does not run in background (键名:UIApplicationExistsOnSuspend) 自从iOS4.0之后,当你在应用程序执行的时候按 ...

  7. 2_03_MSSQL课程_查询_分组和连接

    “查” 的三种查询语句 where Group by  having  where 对表起作用 (原始硬盘上的表) 单纯的表 having 对结果起作用(筛选) 缓存,不在文件中 select --第 ...

  8. 今日份学习： springboot 用到的注解

    笔记 上回用到的所有注解 @Around @Aspect @Autowired @Bean @Configuration @RequestMapping @ResponseBody @RestCont ...

  9. 新闻网大数据实时分析可视化系统项目——3、Hadoop2.X分布式集群部署

    (一)hadoop2.x版本下载及安装 Hadoop 版本选择目前主要基于三个厂商(国外)如下所示: 1.基于Apache厂商的最原始的hadoop版本, 所有发行版均基于这个版本进行改进. 2.基于 ...

  10. 二、java基础-运算符_控制语句_break_continue_return

    1.运算符 1)算术运算符:6个+ — * \ % ++  --2)关系运算符:6个>  >=  <  <=   ==   !=3)布尔运算符&&并且  ||或 ...