Php event on click link

[sqssd]

How to do when mouse click on link instead simple url open modal popup and load into this popup text data from

php

      if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
        if ($hint=="") {
          $hint="<a href='" .
          $z->item(0)->childNodes->item(0)->nodeValue .
          "' target='_blank'>" .
          $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        } else {
          $hint=$hint . "<br /><a href='" .
          $z->item(0)->childNodes->item(0)->nodeValue .
          "' target='_blank'>" .
          $y->item(0)->childNodes->item(0)->nodeValue . "</a>";

xml

<?xml version="1.0" encoding="utf-8"?>
<root>
  <child>
    <subchild>heading</subchild>
    <to>text</to>
  </child>
  <child>
    <subchild>heading</subchild>
    <to>text</to>
  </child>
  <child>
    <subchild>heading</subchild>
    <to>text</to>
  </child>
  <child>
    <subchild>heading</subchild>
    <to>text</to>
  </child>
  <child>
    <subchild>heading</subchild>
    <to>text</to>
  </child>
  <child>
    <subchild>heading</subchild>
    <to>text</to>
  </child>
</root>

[Pepster64]

To achieve this, you can add an event listener to the link and prevent the default behavior of opening the URL. Then, you can use AJAX to load the XML file, parse it using the DOMParser API, and extract the data you want to display in the modal popup. Finally, you can display the data in the modal popup using JavaScript and CSS.

<a href="data.xml" class="popup-link">Click me to open modal popup</a>
<div id="popup" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h1 id="heading"></h1>
    <p id="text"></p>
  </div>
</div>

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  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;
}

const link = document.querySelector('.popup-link');
const modal = document.querySelector('#popup');
const headingEl = document.querySelector('#heading');
const textEl = document.querySelector('#text');

link.addEventListener('click', function(event) {
  event.preventDefault(); // Prevent opening the URL

  // Load the XML file using AJAX
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      const parser = new DOMParser();
      const xml = parser.parseFromString(this.responseText, "application/xml");
      
      // Extract the data from the XML file
      const childNodes = xml.getElementsByTagName('child');
      const data = [];
      for (let i = 0; i < childNodes.length; i++) {
        const subchild = childNodes[i].getElementsByTagName('subchild')[0].textContent;
        const to = childNodes[i].getElementsByTagName('to')[0].textContent;
        data.push({ subchild, to });
      }
      
      // Display the data in the modal popup
      if (data.length > 0) {
        const firstItem = data[0];
        headingEl.textContent = firstItem.subchild;
        textEl.textContent = firstItem.to;
        modal.style.display = "block";
      }
    }
  };
  xhr.open("GET", this.href, true);
  xhr.send();
});

modal.querySelector('.close').addEventListener('click', function() {
  modal.style.display = "none";
});

Not tested, but it might be what you are looking for?

[sqssd]

Your example works on pure js/css in statics. But the php script dynamically creates a link depending on the search query. How to open a modal popup when mouse click on a such link instead a simple url and load data into this popup from xml tags “subchild” and “to” in accordance with the search query.