html中，图片点击出现弹窗

2401_83810323 2024-07-10 11:02:46

在HTML中实现一个图片点击后出现弹窗（模态框）的效果，可以使用原生的JavaScript或者结合jQuery等库来完成。下面我将给出一个使用纯HTML、CSS和JavaScript的例子，以及一个使用jQuery的例子。

纯HTML, CSS, JavaScript实现

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Image Popup</title>
7<style>
8  .modal {
9    display: none;
10    position: fixed;
11    z-index: 1;
12    left: 0;
13    top: 0;
14    width: 100%;
15    height: 100%;
16    overflow: auto;
17    background-color: rgba(0, 0, 0, 0.5);
18  }
19
20  .modal-content {
21    margin: 15% auto;
22    display: block;
23    width: 80%;
24    max-width: 700px;
25  }
26  
27  .close {
28    position: absolute;
29    top: 15px;
30    right: 35px;
31    color: #f1f1f1;
32    font-size: 40px;
33    font-weight: bold;
34    transition: 0.3s;
35  }
36
37  .close:hover,
38  .close:focus {
39    color: #bbb;
40    text-decoration: none;
41    cursor: pointer;
42  }
43</style>
44</head>
45<body>
46
47<!-- 图片 -->
48<img id="myImg" src="path/to/your/image.jpg" alt="Your Image" style="width:100%;max-width:300px">
49
50<!-- 模态框 -->
51<div id="myModal" class="modal">
52  <span class="close">&times;</span>
53  <img class="modal-content" id="img01">
54  <div id="caption"></div>
55</div>
56
57<script>
58// 获取模态框
59var modal = document.getElementById("myModal");
60
61// 获取图像并附加数据-属性以获取原始图像URL
62var img = document.getElementById("myImg");
63var modalImg = document.getElementById("img01");
64var captionText = document.getElementById("caption");
65img.onclick = function(){
66  modal.style.display = "block";
67  modalImg.src = this.src;
68  captionText.innerHTML = this.alt;
69}
70
71// 获取关闭按钮
72var span = document.getElementsByClassName("close")[0];
73
74// 当用户点击“x”时，关闭模态框
75span.onclick = function() { 
76  modal.style.display = "none";
77}
78</script>
79
80</body>
81</html>

使用jQuery实现

如果你熟悉jQuery并且项目中已经引入了jQuery库，那么可以使用以下代码：

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Image Popup with jQuery</title>
7<link rel="stylesheet" href="path/to/your/css/file.css">
8<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
9</head>
10<body>
11
12<!-- 图片 -->
13<img id="myImg" src="path/to/your/image.jpg" alt="Your Image" style="width:100%;max-width:300px">
14
15<!-- 模态框 -->
16<div id="myModal" class="modal">
17  <span class="close">&times;</span>
18  <img class="modal-content" id="img01">
19  <div id="caption"></div>
20</div>
21
22<script>
23$(document).ready(function(){
24  // 获取模态框
25  var modal = $('#myModal');
26
27  // 获取图像并附加数据-属性以获取原始图像URL
28  $('#myImg').on('click', function(){
29    modal.show();
30    $('#img01').attr('src', this.src);
31    $('#caption').text(this.alt);
32  })
33
34  // 获取并绑定关闭按钮
35  $('.close').on('click', function() {
36    modal.hide();
37  });
38
39  // 当用户点击窗口外部时，关闭模态框
40  $(window).on('click', function(event) {
41    if (event.target == modal[0]) {
42      modal.hide();
43    }
44  });
45});
46</script>
47
48</body>
49</html>

请确保将path/to/your/image.jpg替换为你的图片实际路径，如果需要的话，你也可以根据自己的需求调整样式。

...全文