Question

我有一个复杂的SVG，它是建筑物的平面图。我想创建模态窗口或弹出窗口，提供建筑物中不同房间的小描述。

问题：如何在点击SVG内部或内部时添加一个boostrap模式（或其他弹出窗口）？我已经尝试在标签中添加模态代码，但这似乎不起作用。

     <rect   data-toggle="modal" data-target="#section-h-modal" id="section-h" x="112.6" y="31.4" class="mapsvg-region" width="35.2" height="69.3" style="vector-effect: non-scaling-stroke; fill: rgb(0, 125, 186);">
<foreignobject class="node" x="46" y="22" width="100" height="100">
<div id="section-h-modal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
</foreignobject>

Answer 1

您使用了错误的标签来触发Modal了解更多信息异物 Click Here 你的解决方案是 here

<svg>
 <g>
  <a xlink:href="#" class="btn-cta" >
   <rect   data-toggle="modal" data-target="#section-h-modal" id="section-h" 
    x="112.6" y="31.4" class="mapsvg-region" width="35.2" height="69.3" 
    style="vector-effect: non-scaling-stroke; fill: rgb(0, 125, 186);" >
   </rect>
  </a>
 </g>
</svg>
<div  class="overlay">
 <div class="modal">
 <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button class="close-btn">x</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-
       dismiss="modal">Close</button>
    </div>
  </div>
 </div>
</div>

CSS

 .btn-cta {
  width: 120px;
  display: block;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  font-size: 20px;
  padding: 10px;
  background: #ccc;
  color: #555;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  margin-top: -10%;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.59, -0.17, 0.3, 1.67);
}

.overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  transform: translate(0px, -50px);
  transition: all 0.7s cubic-bezier(0.59, -0.17, 0.3, 1.67);
  position: relative;
  padding: 30px;
  width: 400px;
  background-color: #ddd;
  color: #231D23;
  text-align: center;
  overflow: hidden;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.4);
}

.modal .close-btn {
  position: absolute;
  padding: 3px 9px;
  font-size: 24px;
  text-align: center;
  background: #ccc;
  color: #9c9c9c;
  top: -1px;
  right: 0;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

JQuery

$(function () {
 $('.btn-cta').click(function () {
  $('.overlay').addClass('is-open');
  return false;
 });

 $('.close-btn').click(function () {
  $('.overlay').removeClass('is-open');
 });
});

Answer 2

在大多数库中，例如bootstrap或materialize，您可以通过JavaScript代码打开模式对话框。因此，请阅读他们的示例，了解如何打开它。

要在svg元素上允许单击事件，您必须知道每个svg元素都是普通的dom元素。这意味着，您可以像p标记或类似内容一样访问它。

例如，您的svg中有一个ID为circle01的圈子。要添加点击事件，您可以使用：

$("#circle01").click(function (e) { ... });

通过jQuery或

document.getElementById("circle01").onclick = function (e) { ... };

通过纯JavaScript。

要了解svg的魔力，你必须知道它是纯粹的html;）

如何通过单击SVG元素打开模态窗口

2 个答案: