Bootstrap实现鼠标悬停图片显示二维码弹窗

使用Bootstrap实现鼠标悬停图片显示二维码弹窗效果

本文将介绍如何使用Bootstrap框架和简单的JavaScript代码实现当鼠标悬停在图片上时弹出显示二维码的弹窗效果。

HTML代码:

<img src='your-image.jpg' class='img-thumbnail' data-toggle='modal' data-target='#qrcodeModal' alt='图片描述'>

<div class='modal fade' id='qrcodeModal' tabindex='-1' role='dialog' aria-labelledby='qrcodeModalLabel' aria-hidden='true'>
  <div class='modal-dialog'>
    <div class='modal-content'>
      <div class='modal-body'>
        <img src='your-qrcode.jpg' class='img-thumbnail' alt='二维码'>
      </div>
    </div>
  </div>
</div>

CSS代码:

.img-thumbnail {
  cursor: pointer; /* 设置鼠标样式为指针 */
}

JavaScript代码:

$(document).ready(function() {
  $('.img-thumbnail').hover(function() {
    $('#qrcodeModal').modal('show'); // 鼠标悬停时显示弹窗
  }, function() {
    $('#qrcodeModal').modal('hide'); // 鼠标离开时隐藏弹窗
  });
});

代码说明:

HTML部分:
- 使用<img>标签插入需要显示的图片和二维码图片，并设置图片路径和描述信息。
- 使用Bootstrap的Modal组件创建弹窗，并设置弹窗的ID和相关属性。
- 在图片标签中添加data-toggle='modal'和data-target='#qrcodeModal'属性，用于绑定弹窗触发事件。
CSS部分:
- 为图片添加cursor: pointer;样式，将鼠标样式设置为指针，提升用户体验。
JavaScript部分:
- 使用jQuery库监听图片的hover事件，当鼠标悬停在图片上时触发show事件显示弹窗，当鼠标离开图片时触发hide事件隐藏弹窗。

注意事项:

请将代码中的your-image.jpg和your-qrcode.jpg替换成实际的图片路径。
确保已经正确引入了Bootstrap的CSS和JavaScript文件。

通过以上步骤，即可实现鼠标悬停图片显示二维码弹窗的效果，提升用户体验并方便用户扫码获取更多信息。