点击div生成一个弹窗
时间: 2023-08-12 08:05:15 浏览: 86
Vue $mount实战之实现消息弹窗组件
可以通过以下代码实现一个点击div生成弹窗的效果:
HTML部分:
```html
<div id="myDiv">Click me!</div>
<div id="popup" style="display:none;">Hello, world!</div>
```
CSS部分:
```css
#popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
padding: 10px;
background-color: white;
z-index: 1;
}
```
JavaScript部分:
```javascript
var myDiv = document.getElementById("myDiv");
var popup = document.getElementById("popup");
myDiv.onclick = function() {
popup.style.display = "block";
}
popup.onclick = function() {
popup.style.display = "none";
}
```
这样,当点击myDiv元素时,就会弹出一个id为popup的元素,并在其中显示文字“Hello, world!”,点击popup元素时弹窗会消失。
阅读全文