JavaScript动态实现div窗口弹出&消失功能

Posted 别闹了费曼sir

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript动态实现div窗口弹出&消失功能相关的知识，希望对你有一定的参考价值。

先积累一个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窗口弹出&消失功能的主要内容，如果未能解决你的问题，请参考以下文章

Jquery Mobile 1.2.0 Alpha 1 弹出和动态列表视图

jQuery - 动态 div 高度

DIV+CSS实现弹出窗口隐藏/显示效果+背景变暗

php如何制作弹出窗口

JavaScript 根据使用数组从另一个下拉列表中的选择动态创建选项

这种无边框的弹出窗口如何用JS实现？