https://luisguerreromartinez.com/js/popup.js

1function createPopup(innerHTML){
2  const popup = document.createElement("div");
3  popup.id = "libro-popup";
4  popup.className = "popup";
5  document.body.appendChild(popup);
6
7  const popupContent = document.createElement("div");
8  popupContent.className = "popup-content";
9  popup.appendChild(popupContent);
10
11  const closePopupButton = document.createElement("span");
12  closePopupButton.id = "close-libro-popup-button";
13  closePopupButton.className = "close-popup-button";
14  closePopupButton.innerHTML = "×";
15  popupContent.appendChild(closePopupButton);
16
17  const popupInnerContent = document.createElement("div");
18  popupInnerContent.innerHTML = innerHTML;
19  popupContent.appendChild(popupInnerContent);
20  subscribePopup()
21}
22
23function subscribePopup(){
24  const closePopupButton = document.getElementById("close-libro-popup-button");
25  const popup = document.getElementById("libro-popup");
26  setTimeout(()=>{
27    popup.classList.add("visible");
28  }, 100)
29  
30  closePopupButton.addEventListener("click", function () {
31    popup.classList.remove("visible");
32  });
33
34  window.addEventListener("click", function (event) {
35    if (event.target === popup) {
36      popup.classList.remove("visible");
37    }
38  });
39  document.addEventListener('keydown', event => {
40    if (event.key === 'Escape') {
41      popup.classList.remove("visible");
42    }
43  });
44}
45
46/*fetch('/mexico-cultura/sierra-del-ajusco.html')
47  .then(response => response.text())
48  .then(html => {
49    const parser = new DOMParser();
50    const doc = parser.parseFromString(html, 'text/html');
51    const popup = doc.querySelector('#sierra-del-ajusco');
52    createPopup(popup.innerHTML);
53  })
54  .catch(console.error);*/