Question

我使用多个svg作为触发模态的按钮。如何重用相同的模式并在不同的按钮上显示不同的图像，我应该在哪里放置img标签？

<g  id="Content1" data-toggle="modal" data-target="#imagemodal">
   <--! svg code -->
</g>

<g  id="Content2" data-toggle="modal" data-target="#imagemodal">
   <--! svg code -->
</g>

<g  id="Content3" data-toggle="modal" data-target="#imagemodal">
   <--! svg code -->
</g>

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">              
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span>
      </div>
    </div>
  </div>
</div>

Answer 1

基本方法：

$('#imagemodal').on('show.bs.modal', function(event) {
  $(this).find('.modal-body')
    .empty()
    .append($(event.relatedTarget).clone())
})

body {
  margin: 0;
}

.m-c {
  justify-content: space-evenly;
}

.m-c>svg {
  width: 100px;
  height: auto;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  transform-origin: center;
  margin: 20px;
  transform: scale(.8);
}

.m-c>svg:hover {
  transform: scale(1.2);
}

.m-c>svg circle {
  cursor: pointer;
  opacity: .42;
  transition: opacity .3s ease-out;
}

.m-c>svg circle:hover {
  opacity: 1;
}

.modal-body svg {
  width: 100%;
  height: auto;
}

.modal .modal-content {
  background-color: #191919;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


<div class="container-fluid vh-100 d-flex align-items-center m-c">
  <svg version="1.1" viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg" data-toggle="modal" data-target="#imagemodal">
    <circle cx="1" cy="1" r="1" fill="red" />
  </svg>
  <svg version="1.1" viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg" data-toggle="modal" data-target="#imagemodal">
    <circle cx="1" cy="1" r="1" fill="green" />
  </svg>
  <svg version="1.1" viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg" data-toggle="modal" data-target="#imagemodal">
    <circle cx="1" cy="1" r="1" fill="blue" />
  </svg>
</div>

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body"></div>
    </div>
  </div>
</div>

一些注意事项：

它清空.modal-body并将事件的relativeTarget克隆到其中
event.relativeTarget必须是有效的HTML元素（<g>不是有效的元素，因此我使用了<svg>）
如果不是很明显，则不需要CSS，它是针对此特定演示的

文档：

引导程序：varying modal content，modal events
jQuery：.find()，.emtpy()，.append()
SVG：<g>，<svg>

在不同的触发器上弹出多个模式图像

1 个答案: