Close custom modal when click outside the modal in vanilla JS

Question

I've done this but the modal won't open whatsoever

document.addEventListener('click', ({ target }) => {
            if (!target.closest('#modal-submit')) {
               document.getElementById('modal-submit').classList.add('hide-visibility');
            }
        })

The trickier part is that there's a form inside the modal.

This to trick "mostly code" error: ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

document.getElementById('show-modal').onclick = (e) => {
  document.getElementById('modal-submit').classList.remove('hide-visibility')
}

.hide-visibility {
            opacity: 0;
            visibility: hidden;
        }




        
            
            

            
            

            
            
                
                    
                        Submit Exam
                    
                    
                        
                            
                            I certify that 
                        
                    
                    
                        
                            
                            I have conducted a final round of proofing before submitting this project.

Nikhil Singh · Accepted Answer

document.getElementById("show-modal").onclick = (e) => {
  document.getElementById("modal-submit").classList.remove("hide-visibility");
};

document.addEventListener('click', (event) => {
  const boolIsOutside = document.getElementById("grey-bg").isSameNode(event.target);
  if (boolIsOutside) {
   document.getElementById("modal-submit").classList.add("hide-visibility");
  }
});

.hide-visibility {
            opacity: 0;
            visibility: hidden;
        }


        
            
            

            
            

            
            
                
                    
                        Submit Exam
                    
                    
                        
                            
                            I certify that 
                        
                    
                    
                        
                            
                            I have conducted a final round of proofing before submitting this project.

Using the concept of event propagation, you can use this,

// You can use any other selector according to your need
const ele = document.getElementById('someId');

// adding click event listener to the selected elem (can use any other event)
document.addEventListener('click', (event) => {
  const boolIsInside = ele.contains(event.target);
  if (boolIsInside) {
    // logic if the click was inside the modal
  } else {
    // logic if the click was outside the modal
  }
});

Close custom modal when click outside the modal in vanilla JS

Answers (1)

Related Questions