How to open modal window by clicking on SVG element

Question

I've got a complex SVG that is the floor plan of a building. I'd like to create modal windows or popups that provide a small description of the different rooms in the building.

The question: how do I add a boostrap modal (or other popup) on click of a or inside the SVG? I've tried adding the modal code within a tag but that doesn't seem to be working.

     <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

In most libraries, e.g., bootstrap or materialize, you can open modal dialogs via JavaScript codes. For this reason, please read their examples to find out, how to open it.

To allow click events on your svg elements, you have to know, that each of the svg elements is an ordinary dom element. That means, you can access it like a p tag or something similar.

For example, you have a circle in your svg with id circle01. To add an on-click-event, you can use:

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

via jQuery or

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

via pure JavaScript.

To understand the magic of svg, you have to know, that it is pure html ;)

Answer 2

You have used wrong tag to trigger the Modal Know more about foreignObject Click Here and your solution is 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');
 });
});