Home Components Modal
Modal
Overview Playground API
Modals are used to display content in a layer above the app.
Usage
Open Modal Modal labels and headings should be set in sentence case. Keep all labels and headings concise and to the point. Modal labels are optional. Save the record Do you like Ice cream?



  
    Open Modal
  

  

    
      
        Modal labels and headings should be set in sentence case. Keep all labels and headings concise and to the point.
        Modal labels are optional.
        
        Save the record
      
    

    
      

      

      Do you like Ice cream?

    

    
<script> const modalButton = document.querySelector('#open-modal-button'); const modal = document.querySelector('#sample-modal'); const saveButton = document.querySelector('#save-button'); const cancelButtons = document.querySelectorAll('.cancel-button'); const nameElm = document.querySelector('#name'); const genderElm = document.querySelector('#gender'); genderElm.items = [ { label: 'Male', value: 'Male' }, { label: 'Female', value: 'Female' }, { label: 'Other', value: 'Other' }, ]; function resetForm() { modal.showLoader = false; saveButton.showLoader = false; saveButton.disable = false; saveButton.color = 'primary'; cancelButtons.forEach((cancelButton) => { cancelButton.disabled = false; }); nameElm.value = ''; genderElm.value = ''; } modalButton.addEventListener('click', () => { modal.open = true; setTimeout(() => { nameElm.setFocus(); }, 80); }); saveButton.addEventListener('click', () => { modal.showLoader = true; saveButton.showLoader = true; saveButton.color = 'secondary'; cancelButtons.forEach((cancelButton) => { cancelButton.disabled = true; }); // Mock save setTimeout(() => { modal.open = false; resetForm(); }, 1000); }); modal.addEventListener('goat:modal-close', () => { modal.open = false; resetForm(); }); cancelButtons.forEach((cancelButton) => { cancelButton.addEventListener('click', () => { modal.open = false; }); }); </script>
Usage
Work in progress
Properties
Events