bootstrap的图片选择弹出框

Bootstrap提供了一个图片选择弹出框组件，可以方便地选择图片并将其插入到页面中。

使用方法如下：

引入Bootstrap的CSS和JS文件：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

创建一个按钮，用于触发图片选择弹出框：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#imageModal">选择图片</button>

创建一个模态框，用于显示图片选择器：

<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="imageModalLabel">选择图片</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 在这里放置图片选择器的代码 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">插入图片</button>
      </div>
    </div>
  </div>
</div>

在模态框的<div class="modal-body">标签中放置图片选择器的代码，可以使用Bootstrap提供的carousel组件：

<div id="imageCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400/FF0000/FFFFFF?text=Image+1" class="d-block w-100" alt="Image 1">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400/00FF00/FFFFFF?text=Image+2" class="d-block w-100" alt="Image 2">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400/0000FF/FFFFFF?text=Image+3" class="d-block w-100" alt="Image 3">
    </div>
  </div>
  <a class="carousel-control-prev" href="#imageCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#imageCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

在模态框的<div class="modal-footer">标签中添加一个按钮，用于插入选择的图片：

<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="insertImage()">插入图片</button>

编写JavaScript代码，实现插入图片的功能：

function insertImage() {
  // 获取当前选中的图片
  var selectedImage = $('#imageCarousel .carousel-item.active img');
  // 创建一个新的图片元素
  var newImage = $('<img>').attr('src', selectedImage.attr('src'));
  // 将新的图片元素插入到页面中
  $('#imageContainer').append(newImage);
}

其中，#imageContainer是用于显示插入的图片的容器元素。

完整的代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap图片选择弹出框</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container mt-5">
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="imageInput">插入图片：</label>
          <div id="imageContainer"></div>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#imageModal">选择图片</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="imageModalLabel">选择图片</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div id="imageCarousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="https://via.placeholder.com/800x400/FF0000/FFFFFF?text=Image+1" class="d-block w-100" alt="Image 1">
              </div>
              <div class="carousel-item">
                <img src="https://via.placeholder.com/800x400/00FF00/FFFFFF?text=Image+2" class="d-block w-100" alt="Image 2">
              </div>
              <div class="carousel-item">
                <img src="https://via.placeholder.com/800x400/0000FF/FFFFFF?text=Image+3" class="d-block w-100" alt="Image 3">
              </div>
            </div>
            <a class="carousel-control-prev" href="#imageCarousel" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#imageCarousel" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="insertImage()">插入图片</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    function insertImage() {
      // 获取当前选中的图片
      var selectedImage = $('#imageCarousel .carousel-item.active img');
      // 创建一个新的图片元素
      var newImage = $('<img>').attr('src', selectedImage.attr('src'));
      // 将新的图片元素插入到页面中
      $('#imageContainer').append(newImage);
    }
  </script>
</body>
</html>
``