Popup pure css popup with close function and 12 positions

Case of use

base #

Example Code

          
            
  
  Toggle popup
  
    Title of popup
    
      Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
    
    footer of popup

with tabs #

Example Code

          
            
  popup with tabs
  
  
    
    
    
    
    
    
      
        
          
            Tab 1
          
        
        
          
            Tab 2
          
        
        
          
            Tab 3
          
        
        
          
            Tab 4
          
        
        
          
            Tab 5
          
        
      
    
    
      
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta laboriosam adipisci et nisi perferendis, porro libero enim sunt tempore eligendi explicabo, iste dolorum. Eius error esse nisi tempore delectus soluta.
      
      
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. A aliquid explicabo reiciendis inventore alias ab minus quis sequi deleniti doloremque, pariatur facilis accusamus quasi incidunt eligendi numquam sed rem perferendis.
      
      
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis voluptatem maxime nesciunt facere eos facilis temporibus rem animi itaque, unde laborum esse ipsa neque adipisci maiores doloribus deleniti debitis minus.
      
      
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae sit iste amet temporibus perferendis deserunt, qui dolore quasi libero, esse ad voluptatibus nisi ullam. Eius culpa facilis ipsa accusamus aliquam?
      
      
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus laborum amet dolores, sed dolorem reprehenderit earum voluptate facilis explicabo ab totam delectus quos perspiciatis quidem perferendis eveniet quas ut incidunt.

Example Code

with menu #

Example Code

	left	center	right
top	top-left (default) Popup will start at top / right of element left-top Popup will start at the bot tom of element. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum mollitia iure, perferendis adipisci quisquam, velit similique sint ut saepe assumenda voluptatibus eos? Cumque inventore nesciunt rem! Dolorem iusto illum magnam.	center-top Popup at the center top	right (top) Popup will start at top / left of element right-top Popup will start at the bot tom of element. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum mollitia iure, perferendis adipisci quisquam, velit similique sint ut saepe assumenda voluptatibus eos? Cumque inventore nesciunt rem! Dolorem iusto illum magnam.
middle	left-middle Popup left middle Lorem ipsum dolor sit amet		right-middle Lorem ipsum dolor sit amet
bottom	left-bottom Popup will start at the top of element. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum mollitia iure, perferendis adipisci quisquam, velit similique sint ut saepe assumenda voluptatibus eos? Cumque inventore nesciunt rem! Dolorem iusto illum magnam. bottom Popup will start at bottom / right of element	bottom-center Popup bottom center Lorem ipsum dolor sit amet	right-bottom Popup will start at the bottom-right Popup will start at bottom / left of element

          
            
  
    
      
      left
      center
      right
    
  
  
    
      top
      
        
          
            
              top-left (default)
              Popup will start at top / right of element
            
            
              left-top
              Popup will start at the bot tom of element. Lorem ipsum dolor sit amet
                consectetur adipisicing elit. Laborum mollitia iure, perferendis adipisci quisquam, velit similique sint
                ut saepe assumenda voluptatibus eos? Cumque inventore nesciunt rem! Dolorem iusto illum magnam.
            
          
        
      
      
        
          
            center-top
            Popup at the center top
          
        
      
      
        
          
            
              right (top)
              Popup will start at top / left of element
            
            
              right-top
              Popup will start at the bot tom of element.
 Lorem ipsum
                dolor sit amet consectetur
 adipisicing elit. Laborum mollitia iure,
 perferendis adipisci
                quisquam, velit similique
 sint ut saepe assumenda voluptatibus eos?
 Cumque inventore
                nesciunt rem!
 Dolorem iusto illum magnam.
            
          
        
      
    
    
      middle
      
        
          
            left-middle
            Popup left middle
Lorem ipsum dolor sit amet
          
        
      
      
        
      
      
        
          
            right-middle
            Lorem ipsum 
dolor sit amet
          
        
      
    
    
      bottom
      
        
          
            
              left-bottom
              Popup will start at the top of element.
Lorem ipsum dolor sit
                amet consectetur adipisicing
 elit. Laborum mollitia iure, perferendis adipisci quisquam,

                velit similique sint ut saepe assumenda 
voluptatibus eos? Cumque inventore nesciunt rem!
                Dolorem
 iusto illum magnam.
            
            
              bottom
              Popup will start at bottom / right of element
            
          
        
      
      
        
          
            bottom-center
            Popup bottom center
 Lorem ipsum dolor sit amet
          
        
      
      
        
          
            
              right-bottom
              Popup will start at the 
            
            
              bottom-right
              Popup will start at bottom / left of element

Setup #

classes less/formir/setup/classes.less #

      
        @popup: popup;
@has-popup: has-popup;
@popup-bottom: bottom;
@popup-bottom-right: bottom-right;
@popup-bottom-center: bottom-center;
@popup-top: top;
@popup-top-right: right;
@popup-center: center;
@popup-right: right;
@popup-right-middle: right-middle;
@popup-left-middle: left-middle;
@popup-right-top: right-top;
@popup-right-bottom: right-bottom;
@popup-left-top: left-top;
@popup-left-bottom: left-bottom;
@popup-hoverable: hoverable;
@popup-active: active;
@popup-absolute: absolute;
@popup-fixed: fixed;
@popup-manual: manual;
@popup-header: popup-header;
@popup-footer: popup-footer;
@popup-content: popup-content;

mixins less/formir/setup/mixins.less #

      
        .popup-active() {
}

.popup-active-on() {
}

.popup-content() {
}

.popup-header() {
}

.popup-footer() {
}

variables less/formir/setup/variables.less #

      
        @popup-background: rgba(255, 255, 255, 1);
@popup-border-width: 0;
@popup-border-color: rgba(60, 60, 60, 1);
@popup-border: @popup-border-width solid @popup-border-color;
@popup-shadow: none;
@popup-text-color: @color-body;
@popup-padding-horizontal: 0;
@popup-padding-vertical: 0;
@popup-padding: @popup-padding-vertical @popup-padding-horizontal;
@popup-max-width: 30rem;
@popup-min-width: 0;
@popup-width: max-content;
@popup-border-radius: 0px;
@popup-arrow-color: @color-body;
@popup-arrow-height: 0px;
@popup-arrow-width: @popup-arrow-height;
@popup-arrow-offset: 20px;
@popup-offset: 0px;
@popup-distance: 0px;

//// Popup inner
@popup-content-padding: 15px 20px;
@popup-footer-padding: @popup-content-padding;
@popup-header-padding: @popup-footer-padding;
@popup-header-bg: @color-body;
@popup-header-text-color: #fff;
@popup-footer-bg: transparent;
@popup-footer-text-color: inherit;