Modal

Modal is considered an "excise" in interaction design where its function does not support the main user flow but instead represent extra work that satisfies either the needs of our tools or those of outside agents as users try to achieve our objectives. 

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files l modal.js l util.js | coc.modal.js | coc-modal-sliding.js l coc.animations.js

Functional grouping: Containers

Demo

Configure: select the dropdowns below to display the variety of options that a modal supports.

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
        

            

                
                    





    
    
    



    
    
        

           Usage best practices
        

        








    
    
    


Component like modal is purposefully interruptive and charges users an excise of cognitive and physical effort every time it is used. Therefore modal should be used sparingly. Modal windows are appropriate for functions that are out of the main interaction flow.


Consider using modals to:


    

  • interrupt a user’s current task to catch their full attention to something more important

  • solicit user input in order to move forward i.e. sign up or login form

  • show additional information without losing the context of the parent page, i.e. showing larger images or videos



The modal can be closed by:


    

  • clicking on the close button

  • pressing the Esc key

  • clicking on the modal backdrop



The last functionality is disabled in the case where user input is required, for example, a confirmation dialog box where the user must explicitly click an option in the modal to proceed.





    






                
                    







                
            

        

    
    
    




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    




    
    


Use it sparingly as it is purposefully interruptive.



    





Clearly present the "close" button.



    



    









                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    




    
    


Do not use for primary interactions, which must always be in the primary window.



    





Do not use to show error, success, or warning messages. Keep them on the page.



    





Don’t surprise users by popping up a modal. Modal needs to be triggered by user's action, such as clicking a button. Uninvited modals may result in a quick dismissal of the window.