<div id="{{ modal_id }}" class="np-modal">
  <div class="np-modal-body np-modal-center">
    <span class="np-modal-close fal fa-times"></span>
    {% if modal_title != "" %}
      <p class="np-modal-title">{{ modal_title }}</p>
    {% endif %}
    <div class="np-modal-content">
      {% include "ratings_interactive" %}
    </div>
    
  </div>
</div>

<style>

  .modal-init {
    height: 100vh;
    overflow-y: hidden;
  }

  .np-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
  }

  .np-modal-close {
    color: #59697B;
    opacity:0.5;
    font-size: 1.6rem;
    position:absolute;
    top:18px;
    right:24px;
  }

  .np-modal-close:hover,
  .np-modal-close:focus {
    text-decoration: none;
    cursor: pointer;
  }

  .np-modal-body {
      background-color: #fff;
      box-shadow: 0px 0px 20px #35404E;
      color:#59697B;
      padding: 40px 32px 48px;
      max-width:680px;
      border-radius: 8px;
      position:relative;
      margin: 0 32px;
      top: 50%;
      transform: translateY(-50%);
  }

  .np-modal-center { text-align:center; }

  .np-modal-title {
      font-size:1.5rem;
      margin-bottom: 1.5rem;
      margin-top:0;
  }

  .np-modal-subtitle {
    font-size:1.125rem;
    margin-bottom:1rem;
  }

  @media (min-width:768px) {
    .np-modal-body {
      padding: 50px 50px 80px;
      width: 75%;
      margin:0 auto;
    }
  }
</style>

<script>  

  const modalClose = document.querySelector(".np-modal-close");
  let modal = null;

  function showPopup(popupId) {
    modal = document.getElementById(popupId);
    modal.style.display = "block";
    document.body.classList.add("modal-init");
  }

  // Close modal when user clicks "x"
  modalClose.onclick = () => {
    modal.style.display = "none";
  }

  // When the user clicks anywhere outside of the modal, close it
  if (modal != null) {
      window.onclick = (event) => {
        if (event.target == modal) {
            modal.style.display = "none";
        }
      }
  }
</script>