partition-jlg-theme/resources/views/sections/footer.blade.php

<footer class="fixed w-full h-[8vh] py-4 bottom-0 bg-jlg-dark-blue border-t border-jlg-light-white flex justify-between">
<!--   @php(dynamic_sidebar('sidebar-footer'))-->
  <div class="text-sm">
    <button class="px-4 py-2 rounded-md ml-6 underline underline-offset-8 hover:underline-offset-4 active:underline-offset-8" onclick="displayAboutPopup()" id="about_button">À PROPOS</button>
    <button class="px-4 py-2 rounded-md ml-6 underline underline-offset-8 hover:underline-offset-4 active:underline-offset-8"><a href="mailto:<?php echo get_option('admin_email') ?>">CONTACT</a></button>
 </div>
  <div class="mr-6 flex items-center">
    <a href="https://www.thalim.cnrs.fr/?lang=fr" target="_blank" class="w-12 mr-4">
      <img class="w-full h-auto" alt="thalim" src="<?= get_template_directory_uri(); ?>/resources/assets/images/logos/thalim.png">
    </a>
    <a href="http://www.univ-paris3.fr/" target="_blank" class="w-24 mr-4">
      <img class="w-full h-auto" alt="sorbonne" src="<?= get_template_directory_uri(); ?>/resources/assets/images/logos/sorbonne.png">
    </a>
    <a href="https://www.cnrs.fr/fr" target="_blank" class="w-12 mr-4">
      <img class="w-full h-auto" alt="cnrs" src="<?= get_template_directory_uri(); ?>/resources/assets/images/logos/cnrs.png">
    </a>
    <a href="https://www.huma-num.fr/" target="_blank" class="w-12">
      <img class="w-full h-auto" alt="humanum" src="<?= get_template_directory_uri(); ?>/resources/assets/images/logos/huma-num.png">
    </a>
  </div>
</footer>

<div id="loading" style="
    width: 100vw;
    height: 100vh;
    background-color: #010d19;
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    color: white;
    opacity: 1;
    transition: opacity 0.2s ease-out;
">
  <p>
    Chargement
    <span class="dot-one">.</span>
    <span class="dot-two">.</span>
    <span class="dot-three">.</span>
  </p>
</div>

<script>
  // Define the event listener function
  function closeAboutPopupHandler(event) {
    event.preventDefault();
    console.log(event.target);
    if (
      event.target != document.querySelector('#about_modale') &&
      event.target != document.querySelector('#about_button') &&
      event.target != document.querySelector('#about_title') &&
      event.target != document.querySelector('#about_content') &&
      event.target.parentElement != document.querySelector('#about_content') &&
      (event.target.tagName != "EM" && event.target.parentElement.parentElement != document.querySelector('#about_content'))
      ) {
      closeAboutPopup();
    }
  }

  // Attach the event listener in the displayAboutPopup function
  function displayAboutPopup() {
    document.getElementById('about_popup').style.display = 'flex';
    setTimeout(() => {
      document.getElementById('about_popup').style.opacity = '1';
      window.addEventListener('click', closeAboutPopupHandler);
    }, 1);
    document.body.style.overflow = 'hidden';

  }

  // Remove the event listener in the closeAboutPopup function
  function closeAboutPopup() {
    document.getElementById('about_popup').style.opacity = '0';
    setTimeout(() => {
      document.getElementById('about_popup').style.display = 'none';
    }, 300);
    
    document.body.style.overflowY = 'scroll';
    // Remove the event listener
    window.removeEventListener('click', closeAboutPopupHandler);
  }
</script>