时间戳

首页 > 解决方案 > 在不同的触发器上弹出多个模态图像

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

问题描述

我使用多个 svgs 作为我的按钮来触发模态。如何重用相同的模式并在不同的按钮上显示不同的图像，我应该在哪里放置我的 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>

标签： htmlbootstrap-modal

解决方案

一种基本的做法：

$('#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>'s）
  • 如果不是很明显，CSS 不是必需的，它针对的是这个特定的演示

文档：

推荐阅读