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

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 > svg circle{
  cursor: pointer;
  opacity: .42;
  transition: opacity .3s ease-out;
}
body > svg circle:hover {
  opacity: 1;
}
body > svg {
  width: 100px;
  height: auto;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  transform-origin: center;
  margin: 20px;
  transform: scale(.8);
}
body > svg:hover {
  transform: scale(1.2);
}

.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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<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 class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body"></div>
    </div>
  </div>
</div>

一些注意事项：

• 它清空.modal-body并将事件的relativeTarget克隆到其中
• [event.relativeTarget必须是有效的HTML元素（<g>不是，因此我使用了<svg>）]

文档：

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