Karriereveiledning

Modal 

<div class="modal text-center">
    <div class="modal-window">
        <button class="modal-close icon-close icon-white" type="button">
            <span class="visually-hidden">Lukk</span>
        </button>
        <div class="modal-content">
            <h2>Hjelp oss å bli bedre!</h2>
            <p class="text-lg">Delta i en annonym brukerundersøkelse. Det tar ca 2 minutter.</p>
            <a class="btn mr-sm" href="">Ja, jeg vil delta</a>
            <a class="btn-secondary modal-close" href="">Nei takk</a>

        </div>
    </div>
</div>
 
<div class="modal {{ class }}">
  <div class="modal-window">
    <button class="modal-close icon-close icon-white" type="button">
      <span class="visually-hidden">Lukk</span>
    </button>
    <div class="modal-content">
      {{ content|markdown }}
    </div>
  </div>
</div>
 
{
  "class": "text-center",
  "content": "## Hjelp oss å bli bedre!\n<p class=\"text-lg\">Delta i en annonym brukerundersøkelse. Det tar ca 2 minutter.</p>\n<a class=\"btn mr-sm\" href=\"\">Ja, jeg vil delta</a>\n<a class=\"btn-secondary modal-close\" href=\"\">Nei takk</a>\n"
}
  • The modal is hidden by default
  • Modal has to be present on page + document.body need to have the class .modal-is-open
  • Modal will close by one of the following:
    • “ESC”-key
    • Click outside modal window
    • Click on close button in top right corner of modal window.
  • Button links can also close modal by adding class .modal-close