Modals pure css modal with animation, transparent background and window

To toggle modals use label for="" tag that points assign input type="radio" above modal tag.

For closing modal you need once more input tag that will tell when modal is close, use the same name for all input elements in the same group of modals. This solution gives you the opportunity to switch between modals in one group, the same as work gropus of radio inputs with the same name.

normal #

Example Code

Show normal modal

					
						
Show normal modal


  
    
      
        Modal header
        
      
      
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Obcaecati ratione quis cum mollitia dignissimos dicta alias, non illum sapiente molestiae quo ipsa exercitationem laborum sunt hic vero sed illo soluta!
      
      Model footerClose

transparent #

Example Code

Transparent modal

					
						

  Transparent modal

 

  
    
      
        Modal header 2
        
      
      
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur temporibus ad eius dignissimos qui alias pariatur quos iure suscipit in, maxime aspernatur perspiciatis dolorum velit perferendis veritatis explicabo dolorem minus?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium enim quos vel molestiae quibusdam explicabo maxime dolore architecto aliquid distinctio minus, voluptates deleniti, incidunt earum aspernatur nostrum vitae, odio neque.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, minus unde? Odio nemo quas quaerat ad temporibus blanditiis, dolore consequuntur perferendis veniam deleniti incidunt laborum ducimus voluptatum modi nisi a!
      
      
        Modal footer

group #

Example Code

Modal 1 of 2

					
						

  Modal  1 of 2



  
    
      
        Modal 1
        
      
      
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint nulla ut accusamus accusantium esse, fuga doloribus veritatis ratione eligendi voluptatibus assumenda pariatur quae in nostrum sit quos unde suscipit voluptatum!
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint nulla ut accusamus accusantium esse, fuga doloribus veritatis ratione eligendi voluptatibus assumenda pariatur quae in nostrum sit quos unde suscipit voluptatum!
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint nulla ut accusamus accusantium esse, fuga doloribus veritatis ratione eligendi voluptatibus assumenda pariatur quae in nostrum sit quos unde suscipit voluptatum!
         Open modal 2 of 2
      
    
  
  




  
    
      
        Modal 2
        
      
      
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint nulla ut accusamus accusantium esse, fuga doloribus veritatis ratione eligendi voluptatibus assumenda pariatur quae in nostrum sit quos unde suscipit voluptatum!
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint nulla ut accusamus accusantium esse, fuga doloribus veritatis ratione eligendi voluptatibus assumenda pariatur quae in nostrum sit quos unde suscipit voluptatum!
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint nulla ut accusamus accusantium esse, fuga doloribus veritatis ratione eligendi voluptatibus assumenda pariatur quae in nostrum sit quos unde suscipit voluptatum!
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint nulla ut accusamus accusantium esse, fuga doloribus veritatis ratione eligendi voluptatibus assumenda pariatur quae in nostrum sit quos unde suscipit voluptatum!
        Close

on checkbox input #

Example Code

Modal 3

					
						
  Modal 3



  
    
      
        Modal three
        
      
      
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint nulla ut accusamus accusantium esse, fuga doloribus veritatis ratione eligendi voluptatibus assumenda pariatur quae in nostrum sit quos unde suscipit voluptatum!
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint nulla ut accusamus accusantium esse, fuga doloribus veritatis ratione eligendi voluptatibus assumenda pariatur quae in nostrum sit quos unde suscipit voluptatum!
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint nulla ut accusamus accusantium esse, fuga doloribus veritatis ratione eligendi voluptatibus assumenda pariatur quae in nostrum sit quos unde suscipit voluptatum!
        
      
      
          Close

Setup #

classes less/formir/setup/classes.less #

			
				@modal: modal;
@modal-wrapper: modal-wrapper;
@modal-window: modal-window;
@modal-footer: modal-footer;
@modal-header: modal-header;
@modal-content: modal-content;
@modal-close: modal-close;
@modal-backdrop: modal-backdrop;
@modal-animated: animated;
@modal-open: modal-open;
@modal-opened: modal-opened;
@modal-centered: centered;

@modal-window-s: modal-widnow-s;
@modal-window-l: modal-window-l;
@modal-window-xl: modal-window-xl;
@modal-window-fullscreen: modal-window-fullscreen;

variables less/formir/setup/variables.less #

			
				@modal-width: 650px;
@modal-margin: 5vh;
@modal-min-height: 300px;
@modal-max-width: calc(100% ~"-" @content-min-margin * 2);
@modal-background-color: rgba(0, 0, 0, 0.7);
@modal-border: 0 none;
@modal-header-background: transparent;
@modal-animate-function: 0.4s ease;
@modal-animate-transform-x: 0;
@modal-animate-transform-y: -100vh; // x, y

@modal-s-width: 450px;
@modal-l-width: 70%;
@modal-xl-width: 80%;
@modal-fullscreen-width: 100%;