首页我的弹窗图片是一张对象存储的图片链接，给我做一条弹窗代码以我这个图片链接为主。点击弹窗后可以有跳转链接。直插入到html里面就可以的代码。要在进入页面第一画面展示。

我的弹窗图片是一张对象存储的图片链接，给我做一条弹窗代码以我这个图片链接为主。点击弹窗后可以有跳转链接。直插入到html里面就可以的代码。要在进入页面第一画面展示。

时间: 2024-03-01 19:55:36 浏览: 113

好的，以下是基于你提供的要求编写的弹窗代码： ```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; } </style> </head> <body> <div class="popup"> <div class="popup__content"> <span class="popup__close">×</span> <img class="popup__image" src="你提供的图片链接" alt="弹窗图片"> <a class="popup__link" href="你提供的跳转链接">点击此处跳转</a> </div> </div> <script> // 弹窗关闭按钮 document.querySelector('.popup__close').addEventListener('click', function() { document.querySelector('.popup').remove(); }); </script> </body> </html> ``` 将上面的代码复制粘贴到你的 HTML 文件中即可。注意将“你提供的图片链接”和“你提供的跳转链接”替换为你实际使用的链接。

阅读全文