点击后屏幕中间弹出图片层

代码

1. <script>
   
2. function showImagePopup(imgUrl="1.jpg") {
   
3.   // 创建遮罩层
   
4.   const overlay = document.createElement('div');
   
5.   overlay.style = `
   
6.     position: fixed;
   
7.     top: 0;
   
8.     left: 0;
   
9.     width: 100%;
   
10.     height: 100%;
    
11.     background: rgba(0,0,0,0.8);
    
12.     z-index: 999;
    
13.     display: flex;
    
14.     justify-content: center;
    
15.     align-items: center;
    
16.   `;
    
17.   
    
18.   // 创建图片容器
    
19.   const imgContainer = document.createElement('div');
    
20.   imgContainer.style = `
    
21.     max-width: 90%;
    
22.     max-height: 90%;
    
23.     position: relative;
    
24.   `;
    
25.   
    
26.   // 创建关闭按钮
    
27.   const closeBtn = document.createElement('span');
    
28.   closeBtn.innerHTML = '×';
    
29.   closeBtn.style = `
    
30.     position: absolute;
    
31.     top: -30px;
    
32.     right: -30px;
    
33.     color: white;
    
34.     font-size: 30px;
    
35.     cursor: pointer;
    
36.   `;
    
37.   closeBtn.onclick = () => document.body.removeChild(overlay);
    
38.   
    
39.   // 创建图片元素
    
40.   const img = document.createElement('img');
    
41.   img.src = imgUrl;
    
42.   img.style = `
    
43.     max-width: 100%;
    
44.     max-height: 90vh;
    
45.     border: 3px solid white;
    
46.     box-shadow: 0 0 20px rgba(0,0,0,0.5);
    
47.   `;
    
48.   
    
49.   // 组装元素
    
50.   imgContainer.appendChild(closeBtn);
    
51.   imgContainer.appendChild(img);
    
52.   overlay.appendChild(imgContainer);
    
53.   document.body.appendChild(overlay);
    
54.   
    
55.   // 点击遮罩层关闭
    
56.   overlay.onclick = (e) => {
    
57.     if (e.target === overlay) document.body.removeChild(overlay);
    
58.   };
    
59. }     
    
60. </script>

复制代码

1. onclick="showImagePopup()"

复制代码