今天给大家分享一款轻量级Modal模态框插件cta.js。这是一款无需使用jQuery插件，纯js编写的模态框弹出特效。效果图如下：

   

实现的代码。

html代码：

     
    
      
        
       
        
       
        
       
        
       
        
       
        
       
        
       
    
      
     
    
     
    
      
Opening modals on button clicks
    
      
       Click for awesomeness
      
     
    
     
    
      
Opening sidebars
    
      
       Open the Sidebar
      
     
    
     
     
      
     
    
     
        
              
      
            Visual Continuity
        
      
            
       
                        Transitioning between two visual states should be clear, smooth and effortless and                not confuse the user. A well-designed transition does the heavy lifting and enables                the user to clearly understand where their attention should be focused.
       
        
      
    
     
    
     
        
              
      
            Share it if you like it
    
     
    
     
        
              
      
            Customary cat!
        
              
      
            You found me :)
    
     
    
     
        
              
      
            Hierarchical timing
        
      
            
       
                        When building a transition, consider the order and timing of the elements' movement.                Ensure that motion supports the information hierarchy, conveying what content is                most important by creating a path for the eye to follow.
       
        
      
    
     
    
     
        
              
      
            Consistent choreography
        
      
            
       
                        A well-choreographed app also provides teachable moments. When transitioning elements                are coordinated, the user's understanding of the app grows. They "get" the app;                they don't feel disoriented by the animation.
       
        
      
    
     
    
     
        
              
      
            Do you think this is Awesome?
        
      
        
      Yes 
      No    
     
    
     
        
              
      
        
      
        
      
        
      
        
      
        
      
    
     

js代码：

var closeFn;        function closeShowingModal(liked) {            if (liked !== undefined) {                _gaq.push(['_trackEvent', 'ctajs', liked ? 'liked' : 'unliked']);            }            var showingModal = document.querySelector('.modal.show');            if (!showingModal) return;            showingModal.classList.remove('show');            document.body.classList.remove('disable-mouse');            if (closeFn) {                closeFn();                closeFn = null;            }        }        document.addEventListener('click', function (e) {            var target = e.target;            if (target.dataset.ctaTarget) {                _gaq.push(['_trackEvent', 'ctajs', 'modal']);                closeFn = cta(target, document.querySelector(target.dataset.ctaTarget), { relativeToWindow: true }, function showModal(modal) {                    modal.classList.add('show');                    document.body.classList.add('disable-mouse');                });            }            else if (target.classList.contains('modal-close-btn')) {                closeShowingModal();            }        });        document.addEventListener('keyup', function (e) {            if (e.which === 27) {                closeShowingModal();            }        })        var _gaq = _gaq || [];

via：