我的弹窗图片是一张对象存储的图片链接,给我做一条弹窗代码以我这个图片链接为主。点击弹窗后可以有跳转链接。直插入到html里面就可以的代码。
时间: 2024-03-01 20:55:32 浏览: 37
好的,下面是一段基本的弹窗代码,你可以根据自己的需要进行修改:
```
<script>
function popupWindow() {
var imgUrl = '图片链接';
var linkUrl = '跳转链接';
var popup = window.open('', '_blank', 'width=500,height=500');
popup.document.write('<html><head><title>弹窗标题</title></head><body>');
popup.document.write('<a href="' + linkUrl + '"><img src="' + imgUrl + '" /></a>');
popup.document.write('</body></html>');
}
popupWindow();
</script>
```
将上面代码中的 `图片链接` 和 `跳转链接` 分别替换为你自己的图片链接和跳转链接,然后将整段代码插入到你的 HTML 文件中即可。注意,这段代码必须放在 `<head>` 标签或页面底部的 `<body>` 标签中。
相关问题
给我现有的网站插入一个进入后弹窗的html的代码。弹窗内容是我的一个对象存储的链接图片。然后点击这个图片后会跳转到其他画面,点击其他区域是进入我的主页。
好的,以下是基于你提供的要求编写的弹窗代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹窗示例</title>
<style>
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.popup__content {
position: relative;
width: 80%;
max-width: 600px;
background: #fff;
padding: 20px;
border-radius: 5px;
text-align: center;
}
.popup__close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
}
.popup__image {
max-width: 100%;
max-height: 80vh;
margin-bottom: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 在此处插入弹窗代码 -->
<div class="popup">
<div class="popup__content">
<span class="popup__close">×</span>
<a href="你提供的跳转链接"><img class="popup__image" src="你提供的图片链接" alt="弹窗图片"></a>
<p>点击图片跳转</p>
</div>
</div>
<script>
// 弹窗关闭按钮
document.querySelector('.popup__close').addEventListener('click', function() {
document.querySelector('.popup').remove();
});
// 点击弹窗图片跳转
document.querySelector('.popup__image').addEventListener('click', function() {
window.location.href = '你提供的跳转链接';
});
</script>
</body>
</html>
```
将上面的代码复制粘贴到你的网站 HTML 文件中,然后将“你提供的图片链接”和“你提供的跳转链接”替换为你实际使用的链接即可。注意,为了让这个弹窗在进入后自动弹出,你需要将弹窗代码插入到网站的头部或者首页中。
你是一个可以帮我写样式的工具,写一个首页弹窗图片的样式
当然,我可以帮你写一个首页弹窗的样式。以下是一个简单的样式示例:
.pop-up {
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
padding: 20px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
.pop-up img {
max-width: 100%;
height: auto;
}
.pop-up .close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
这个样式将在页面中心显示一个弹出窗口,其中包含一个关闭按钮和一张图片。你可以根据需要进行调整。
补充说明:这个样式仅供参考,需要根据实际情况进行修改和调整。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)