点击一个按钮弹出一个新div窗口 没点击时隐藏div窗口
时间: 2024-05-08 13:18:04 浏览: 238
左侧隐藏div,点击按钮弹出
5星 · 资源好评率100%
可以使用JavaScript来实现这个功能。
首先,在HTML中创建一个按钮和一个div容器:
```html
<button onclick="showDiv()">点击我弹出窗口</button>
<div id="myDiv" style="display:none;">
这是一个新窗口
</div>
```
注意,div容器的初始样式为`display:none;`,即隐藏状态。
然后,在JavaScript中编写一个函数来控制div容器的显示和隐藏:
```javascript
function showDiv() {
var div = document.getElementById("myDiv");
if (div.style.display === "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
```
该函数首先通过`getElementById()`方法获取到div容器的元素,然后判断当前的`display`属性值,如果为`none`,则将其设置为`block`,使其显示;如果为`block`,则将其设置为`none`,使其隐藏。
最后,将该函数绑定到按钮的`onclick`事件上,当点击按钮时,就会执行该函数,从而实现弹出新窗口的效果。
阅读全文