Pure CSS responsive popups solution

pure-css-responsive-popups-solution.markdown

Pure CSS responsive popups solution

A Pen by orrburgel on CodePen.

License.

Responsive CSS Only Popup.html

<label for="1">CLICK 1!</label>
<label for="2">CLICK 2!</label>
<label for="3">CLICK 3!</label>

<div class="popups">
  
  <input type="checkbox" id="1" />
  <div class="modal">
    <div class="modal__inner">
      <p>1</p>
      <label for="1" class="close">x</label>
    </div>
  </div>
  
  <input type="checkbox" id="2" />
  <div class="modal">
    <div class="modal__inner">
      <p>2</p>
      <label for="2" class="close">x</label>
    </div>
  </div>
  
  <input type="checkbox" id="3" />
  <div class="modal">
    <div class="modal__inner">
      <p>3</p>
      <label for="3" class="close">x</label>
    </div>
  </div>
  
</div>

style.scss

.popups {
  box-sizing: border-box;
  position: absolute;
  width: 50%;
  margin: auto;
  padding: 20px;
  height: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  @media( max-width: 767px ){
			position: relative;
      width: 100%;
	}
	.modal {
    box-sizing: border-box;
		z-index: 1;
		opacity: 0;
		visibility: hidden;
    position: fixed;
    width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition: opacity 500ms ease-in-out;
		&__inner {
      box-sizing: border-box;
		  transform: translate(-50%, -50%) scale(.75);
	    top: 50%;
	    left: 50%;
			width: 50%;
	    background: white;
	    padding: 30px;
			position: absolute;
      color: black;
			@media( max-width: 767px ){
				width: 100%;
			}
		}
	}
	input {
		display: none;
		&:checked {
			+ .modal {
				opacity: 1;
				visibility: visible;
				.modal__inner {
	        transform: translate(-50%, -50%) scale(1);
			    transition: all 200ms ease-in-out;
          p {
          }
				}
				.close {
          box-sizing: border-box;
					position: absolute;
					top: 0;
					right: 0;
					height: 30px;
          margin: -10px;
          border-radius: 50%;
          @media( max-width: 767px ){
              margin: 0;
              border-radius: 0;
          }
          font-size: 20px;
          font-weight: bold;
          line-height: 26px;
          text-align: center;
          color: #ffffff;
					width: 30px;
          cursor: pointer;
					background: #1a123b;
			    transition: all 200ms ease-in-out;
					&:hover {
						background: #00ceb1;
					}
				}
			}
		}
	}
}