用js帮我实现一个弹窗,弹窗提示你爱我吗?点击爱你就关闭弹窗点击不爱不关闭弹窗提示请点击爱我
时间: 2024-05-06 09:21:25 浏览: 14
好的,以下是实现该弹窗的代码:
HTML:
```
<button onclick="showPopup()">点击弹窗</button>
<div id="popup" style="display: none">
<p>你爱我吗?</p>
<button onclick="closePopup(true)">爱你</button>
<button onclick="closePopup(false)">不爱</button>
</div>
```
JS:
```
function showPopup() {
document.getElementById("popup").style.display = "block";
}
function closePopup(answer) {
if (answer) {
alert("我也爱你!");
}
document.getElementById("popup").style.display = "none";
}
```
希望这能帮到你,有什么问题还请继续问我哦~
相关问题
arcgisjs 设置 graphicsLayer某一个信息弹窗显示出来,不通过点击实现
可以通过调用 `map.infoWindow.setContent()` 和 `map.infoWindow.show()` 方法来实现在加载页面时自动显示指定图形的信息弹窗。具体步骤如下:
1. 获取 graphicsLayer 中的指定图形对象。
```javascript
var graphic = graphicsLayer.graphics[0]; // 假设要显示第一个图形的信息弹窗
```
2. 设置弹窗内容。
```javascript
var content = "这里是弹窗的内容"; // 可以使用 HTML 标记语言来设置内容
map.infoWindow.setContent(content);
```
3. 显示弹窗。
```javascript
map.infoWindow.show(graphic.geometry); // 将弹窗显示在指定图形的位置
```
完整代码示例:
```javascript
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/GraphicsLayer",
"esri/Graphic"
], function(Map, MapView, GraphicsLayer, Graphic) {
var map = new Map({
basemap: "streets-navigation-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.805, 34.027],
zoom: 13
});
var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
var point = {
type: "point",
longitude: -118.805,
latitude: 34.027
};
var markerSymbol = {
type: "simple-marker",
color: [226, 119, 40],
outline: {
color: [255, 255, 255],
width: 2
}
};
var pointGraphic = new Graphic({
geometry: point,
symbol: markerSymbol
});
graphicsLayer.add(pointGraphic);
var content = "<b>这里是弹窗的内容</b>";
map.infoWindow.setContent(content);
map.infoWindow.show(pointGraphic.geometry);
});
```
html实现点击元素弹窗,点击其他关闭弹窗
可以使用JavaScript来实现这个功能。具体步骤如下:
1. 给需要点击的元素添加一个点击事件,当点击该元素时弹出弹窗。
2. 给整个页面(或者弹窗以外的区域)添加一个点击事件,当点击页面时关闭弹窗。
3. 在弹窗的HTML代码中添加一个id,方便用JavaScript操作该弹窗。
下面是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>点击元素弹窗</title>
<style>
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
display: none;
}
</style>
</head>
<body>
<button id="showPopup">点击弹窗</button>
<div id="popup" class="popup">
<p>这是一个弹窗</p>
<button id="closePopup">关闭</button>
</div>
<script>
// 获取元素
var showPopupBtn = document.getElementById('showPopup');
var closePopupBtn = document.getElementById('closePopup');
var popup = document.getElementById('popup');
// 点击显示弹窗
showPopupBtn.addEventListener('click', function() {
popup.style.display = 'block';
});
// 点击关闭弹窗
closePopupBtn.addEventListener('click', function() {
popup.style.display = 'none';
});
// 点击页面关闭弹窗
document.addEventListener('click', function(e) {
if (e.target != popup && e.target != showPopupBtn) {
popup.style.display = 'none';
}
});
</script>
</body>
</html>
```
在这个示例中,我们给“点击弹窗”按钮添加了一个点击事件,当点击该按钮时弹出弹窗。同时,我们给页面添加了一个点击事件,当点击页面时关闭弹窗。在JavaScript代码中,我们通过判断点击事件的目标元素来确定是否需要关闭弹窗。具体来说,如果点击的不是弹窗或“点击弹窗”按钮,则关闭弹窗。
相关推荐
![](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)