先积累一个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; }