BFNA Design System

Modal: Default 

<button class="modal__trigger" data-id="modal-00">Activate Modal</button>

<div id="modal-00" class="modal" aria-hidden>
    <div class="modal__overlay modal__trigger" data-id="modal-00"></div>
    <div class="modal__window">
        <button class="modal__close modal__trigger" data-id="modal-00"></button>
        <div class="modal__content">

        </div>
    </div>
</div>
 
<button class="modal__trigger" data-id="modal-00">Activate Modal</button>

<div id="modal-00" class="modal" aria-hidden>
  <div class="modal__overlay modal__trigger" data-id="modal-00"></div>
  <div class="modal__window">
    <button class="modal__close modal__trigger" data-id="modal-00"></button>
    <div class="modal__content">
      
    </div>
  </div>
</div>
 
{
  "heading": "This is a heading 5",
  "excerpt": "Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas."
}
  • Content: 
    document.querySelectorAll('.modal__trigger').forEach(el => {
  el.onclick = () => {
    const target = el.getAttribute('data-id');
    const modal = document.getElementById(target);
    const body = document.getElementsByTagName('body');

    if (modal.hasAttribute('aria-hidden')) {
      modal.removeAttribute('aria-hidden')
      modal.classList.add('modal--shown');
      body[0].classList.add('modal--shown');

    } else {
      modal.setAttribute('aria-hidden', '')
      modal.classList.remove('modal--shown');
      body[0].classList.remove('modal--shown');
    }
  };
});


// Maybe we should move the class toggling to the <body> element,
// and deal with the displays at the CSS level. 
// This will minimize JS intervention in the DOM, and possibilitate the 
// Overflow: hidden; for the <body> without new JS lines
  • URL: /components/raw/modal/modal.js
  • Filesystem Path: src/components/03-components/modal/modal.js
  • Size: 828 Bytes
  • Content: 
    // Structure
.modal {
  display: none;
  transition: all .4s ease;

  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;

  &__overlay {
    top: 0;
    left: 0;
    right: 0;   
    bottom: 0;
    position: fixed;  
  }
  
  &__trigger { cursor: pointer; }

  &__close { 
    all: unset; // Resets button native styles
    float: right;
    position: relative;
    top: 15px;
    right: 40px;
    cursor: pointer;

    &:after {
      @extend .u-material-icons;
      content: 'close';
    }
  }

  &__window {
    position: relative;
    padding: 40px;
    max-height: 90vh;
    max-width: 80vw;
    overflow-y: auto;
  }
}

.modal.modal--shown {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

body.modal--shown { overflow: hidden; }
  • URL: /components/raw/modal/modal.scss
  • Filesystem Path: src/components/03-components/modal/modal.scss
  • Size: 797 Bytes

There are no notes for this item.