先积累一个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. http的3次握手与4次挥手

    Http的3次握手: 第一次握手:客户端发送一个带SYN的TCP报文到服务器,表示客户端想要和服务器端建立连接. 第二次握手:服务器端接收到客户端的请求,返回客户端报文,这个报文带有SYN和ACK确认 ...

  2. 法兰克因恶意软件感染而关闭了整个IT网络

    导读 现在,越来越多的黑客组织将目标对准大型企业和政府机构.对于黑客而言,这比感染家庭用户具有更高的潜在利益.由于勒索软件的攻击,许多市政网络已被暂时关闭,而这次法兰克福遇到了恶意软件. 法兰克福是世 ...

  3. va_list、va_start、va_arg、va_end

    转载:https://www.cnblogs.com/bwangel23/p/4700496.html 这几个函数和变量是针对可变参数函数的,什么是可变参数函数呢,最经典的莫过于printf和scan ...

  4. JavaWeb项目http请求报错：Error parsing HTTP request header

    详细报错信息如下图: 原因:一一排查后,发现是http的请求中,包含了  “ | ” 竖线特殊符号:而并不是网上说的请求url太长了的原因. 解决方法:把 | 替换为  @

  5. 「CF1037D」Valid BFS?

    传送门 Luogu 解题思路 考虑直接模拟 \(\text{BFS}\) 的过程. 对于每一个节点的儿子,先遍历在输入序列中靠前的,判断 \(\text{BFS}\) 是否匹配即可. 细节注意事项 注 ...

  6. ROS学习笔记11-写一个简单的服务和客户端（C++版本）

    本文主要来源于:http://wiki.ros.org/ROS/Tutorials/WritingServiceClient%28c%2B%2B%29 写一个服务节点.在创建消息和服务中,我们创建了一 ...

  7. DatePicker和DataPickerDialog以及AutoCompleteTextView的基本使用方法

    1.DatePicker和DatePickerDialog的基本使用方法: main.xml: <?xml version="1.0" encoding="utf- ...

  8. 解决modelsim破解在win10下无法生成license

    显示没有找到mgls.dll,此时,这个教程能够帮助你. 1.右击搜索结果cmd,选择以管理员身份运行 2. 打开win64(进入安装目录的win64),也就是两个破解文件所在的路径,输入cd win ...

  9. 「Luogu2264」情书

    传送门 Luogu 解题思路 字符串模拟SB题,STL随便搞. 详情见代码. 细节注意事项 STL总得会吧. 参考代码 #include <algorithm> #include < ...

  10. 「SDOI2015」寻宝游戏

    传送门 Luogu 解题思路 发现一个性质: 对于所有的宝藏点 \({a_1,a_2...a_k}\) ,按照dfs序递增排列,答案就是: \(dis(a_1, a_2) + dis(a_2, a_3 ...