Use a regular dialog for displaying a significant amount of content, larger forms or interactions. This dialog is also the foundation for wizards

Technical Notes

Use data-toggle="modal" data-target="#IDofModal" as the trigger to open a dialog. The modal html should contain the matching className or ID id="IDofModal".

Include data-backdrop="static" in the modal to disable closing by clicking the backdrop.

Example

Code Snippet

      
      

Launch modal


 

     

         

             

                 
Modal title
             
             

                 
One fine body…
             
             

                 Cancel
                 Save
             
         

     

 


      
      
      

Confirmation dialogs can contain up to 2 buttons. The first button is a .btn-default and the last is .btn-secondary. If there is only one button on a confirmation use .btn-primary as it is a primary action.

Technical Notes

Use data-toggle="modal" data-target="#IDofModal" as the trigger to open a dialog. The modal html should contain the matching className or ID id="IDofModal".

Include data-backdrop="static" in the modal to disable closing by clicking the backdrop.

Example

Code Snippet

      
      

Launch Confirmation Modal


 

    

        

            

                
You done good fella!
            
            

                Content goes
            
            

                Default Action
                Secondary Action
            
        
    


      
      
      

Modal dialog wizards build off a regular modal dialog. We extend the dialog by adding additional buttons for "back" capability on the subsequent pages after page one. We should also be able to go directly to a certain "page" or "step". For example, when a wizard is taking the user through a first time operation we will show step one, however if they have already completed the wizard previously another action button on an application page can take them directly to a certain step in the wizard.

Technical Notes

Use data-toggle="modal" data-target="#IDofModal" as the trigger to open a dialog. The modal html should contain the matching className or ID id="IDofModal".

Include data-backdrop="static" in the modal to disable closing by clicking the backdrop.

Example

Animation

We will add animation later as part of polish.

Code Snippet

      
      

    
    
   


    
    Partner
     Supplier

    
    
    


    
    Partner

    
    

    
    
      
      
      
      //BEGIN: JavaScript SNIPPET

        angApp.controller('ModalCtrl', ['$scope', '$window', function($scope, $window) {
          //Create controller as view model
          //We can easily refer back to this controller
            //in later modal pages
          var vmModal = this;
          vmModal.modalData = {};
          vmModal.modalData.numModalPages = 3;
            vmModal.modalData.modalPage = 1;
            vmModal.modalData.quoteSource = 'partner';

          vmModal.nextPage = function(){
            vmModal.modalData.modalPage++;
          };

          vmModal.lastPage = function(){
            vmModal.modalData.modalPage--;
          };

          vmModal.submitForm = function(){
          };
        }]);

      //END: JavaScript SNIPPET