CSS Only Modal ( Popup)

css-only-modal-popup.markdown

CSS Only Modal ( Popup)

A Pen by Sahil on CodePen.

License.

index.html

<div class="container" id="contanier">

  <a href="#popup" class="btn btn-primary">Open CSS Popup</a>
  
  <div class="popup" id="popup">

    <div class="popup__content">
      
      <div class="popup__content__left">
        
      </div>
      
      <div class="popup__content__right">
        

                    <a href="#container" class="popup__close"> &times; </a>
        <h4>Hellow There</h4>
        <br>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown </p>
      </div>
      
      
    </div>
    
  </div>
  
</div>

style.scss

*{
  padding:0px;
  margin:0px;
    font-family:"Segoe UI";
}

@mixin absCenter{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50% , -50%);
  
}

.container{
  width:100vw;
  height:100vh;
  background:#d3d3d3;
  position:relative;
}


.btn-primary{
  text-decoration:none;

  border-radius:4px;
  background:#0f6eff;
  display:inline-block;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%);
  color:white;
  padding:16px 20px;
  transition:all 0.2s;
  
  
  &:hover{
    box-shadow:0px 6px 12px rgba(0,0,0,0.3);
    
  }
  
  &:active{
    background:#005ddf;
    box-shadow:0px 4px 8px rgba(0,0,0,0.38);
  }
}


.popup{
  position:fixed;
  height:100vh;
  width:100vw;
  background:rgba(0,0,0,0.3);
  z-index:10;
  opacity:0;
  visibility:hidden;
  transition:all 0.4s;
  
  &:target{
    opacity:1;
    visibility:visible;
  }
  
      &__close{
        color:black;
        text-decoration:none;
        position:absolute;
        top:20px;
        right:30px;
        font-size:26px;
        transition:all 0.3s;
      
      
    }
  
  
  &__content{
    @include absCenter;
    z-index:20;
    background:white;
    height:250px;
    border-radius:4px;
    box-shadow:0px 8px 16px rgba(0,0,0,0.3);
    width:80%;
    overflow:hidden;
    display:table;
    
    &__left{
      width:33.3333%;
      height:100%;
      background:red;
      display:table-cell;
      
    }
    
    &__right{
      padding:20px;
      width:66.66667%;
      vertical-align:middle;
      
      & p{
       display:table-cell;
        font-size:15px;
       color:#808080;
      column-count:2;
      hyphens:auto;
      } 
      
    }
    

    
    
  }
  
}