原生js点击空白处关闭弹窗
时间: 2023-10-28 17:04:49 浏览: 54
可以通过监听 document 的 click 事件,在点击事件触发时判断点击的区域是否在弹窗区域内,如果不在则关闭弹窗。示例代码如下:
```javascript
const modal = document.querySelector('.modal'); // 获取弹窗元素
document.addEventListener('click', function(event) {
if (!modal.contains(event.target)) {
// 如果点击的区域不在弹窗内,则关闭弹窗
modal.style.display = 'none';
}
});
```
这里利用了`contains()`方法判断点击的元素是否在弹窗内。如果在弹窗内,则不执行关闭弹窗的操作;如果不在弹窗内,则执行关闭弹窗的操作。当然,需要根据具体情况来修改代码。
相关问题
原生js 点击按钮给弹窗增加类名
可以使用以下代码:
```
document.getElementById("buttonId").addEventListener("click", function(){
document.getElementById("popupId").classList.add("className");
});
```
其中,"buttonId" 是按钮的 ID,"popupId" 是弹窗的 ID,"className" 是要增加的类名。
原生js写一个点击div出现弹窗
好的,以下是一个简单的示例代码:
HTML部分:
```html
<div id="myDiv" onclick="showPopup()">点击我弹出弹窗</div>
<div id="popup" style="display:none">这是弹窗内容</div>
```
JavaScript部分:
```javascript
function showPopup() {
var popup = document.getElementById("popup");
popup.style.display = "block";
}
```
通过给div添加click事件,当点击该div时,调用showPopup函数,该函数通过获取id为popup的div元素,将其display样式设置为block,从而显示弹窗。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)