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?

    

    

      

        Cancel
        
        Save
        
      
    


  

  

  <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>