使用 <a href..> 标签作为 svg 地图的 bootstrap4 模态触发器

Question

我一直在尝试为我的项目实现 bootstrap4 模态，我想在 svg 地图上使用 bootstrap4 模态。基本上我想在单击 svg 地图上的特定区域时显示模态。到目前为止，我读到我可以使用 -a- 标签并在其中传递 class 参数，但我无法完成任何事情。我怎样才能做到这一点？谢谢。

这里是html

<a data-mdb-target="#exampleModal" onclick="return false" data-mdb-toggle="modal" >
   <g id="ege" class="region" data-bolgeadi="Ege Bölgesi">
      <path>
        .
        .
</g>
</a>

---模态---

<div class="modal top fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-mdb-backdrop="true" data-mdb-keyboard="true">
        <div class="modal-dialog modal-xl ">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">...</div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
                Close
              </button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>

以及我从目前已阅读的源代码中实现的 JS 代码...

$('a[href$="#exampleModal"]').on( "click", function() {
     $('#exampleModal').modal('show');
  });

Answer 1

试试这个：

HTML:

<svg>
    <!--Your SVG code here-->
</svg>
<div id="clickbox-1"></div>

CSS:

#clickbox-1{
    position: absolute;
    top: /*y pos*/;
    left: /*x pos*/;
    width: 100px; /*You can change the sizes*/
    height: 100px;
    /*OPTIONAL clip-path: path(some path data here)*/
}

您可以将点击事件附加到点击框并将点击框放置在您想要的区域上。

使用 <a href..> 标签作为 svg 地图的 bootstrap4 模态触发器

Using <a href..> tag as a bootstrap4 modal trigger for a svg map

html

javascript

svg

triggers

bootstrap-modal