Question 230056 in Html Question posted in
Some basic documentation can be found here.

Html – open modal when click on SVG map blip

I have an SVG map, which contains some blips
map

i want when i click to this bilps open modal with some informations
i have js file code ,file.js

.enter()
            .append("a")
              .attr("href", function (d, i) {
                 return d.link ? d.link : "#"; // stay on same page if no link was provided
              })
              // Add a target if (and only if) there is a link and we want new tabs
              .attr("target", function (d, i) {
                 return (d.link && config.links_in_new_tabs) ? "_blank" : null;
              })


// blip link
    if (d.active && d.hasOwnProperty("link") && d.link) {
      blip = blip.append("a")
        .attr("xlink:href", d.link);

      if (config.links_in_new_tabs) {
        blip.attr("target", "_blank");
      }
    }

and HTML code,index.html

<body>

<svg id="map"></svg>

<script>
//some codes
entries: [
      {
        "x": 3,
        "y": 2,
        "z": "AWS",
        "active": true,
        "link": "www.google.com"
      },
</script>

so when click to the bilp it open the link URL ,i want to change it to be a modal window

Any recommendations??

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I upload the code in codepen so we can edit on it here we go Visit [https://codepen.io/mirosoft/pen/BaGXxZR][1]


  2. 0

    Create a regular modal popup and update your JavaScript code to open the modal when a blip is clicked.

    // Assuming you have the SVG map and data defined somewhere above this code

// Attach click event handler to each blip
blip.on("click", function(d) {
  // Get modal element
  var modal = document.getElementById("myModal");

  // Get the modal content element and update its content
  var modalContent = modal.querySelector(".modal-content");
  modalContent.innerHTML = "<p>Blip information: " + d.z + "</p>"; // Add more info as needed

  // Display the modal
  modal.style.display = "block";
});

// Close the modal when the close button is clicked
var closeButton = document.querySelector(".close");
closeButton.addEventListener("click", function() {
  var modal = document.getElementById("myModal");
  modal.style.display = "none";
});
    .modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
    <div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Modal content goes here.</p>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search