Open Modal with CSS - Real Helper

md.shakil hossain

2040

Open Modal with CSS

<section class="background">
  <a href="#open-modal" class="button">Open Modal with CSS</a>
  <div id="open-modal" class="modal__background">	
    <div class="modal__content">
      <a href="#close" title="Close" class="close">
      <svg x="0px" y="0px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_3">
	<path d="M34.421,24.02l13.318-13.268c0.188-0.187,0.294-0.44,0.294-0.706c0-0.266-0.104-0.52-0.292-0.708
		l-8.983-9.018c-0.187-0.187-0.441-0.293-0.707-0.294c0,0-0.001,0-0.001,0c-0.265,0-0.519,0.104-0.706,0.292L24.027,13.587
		L10.759,0.267c-0.187-0.187-0.441-0.293-0.707-0.294c0,0-0.001,0-0.001,0c-0.265,0-0.519,0.104-0.706,0.292L0.328,9.248
		c-0.392,0.39-0.393,1.023-0.003,1.414L13.593,23.98L0.274,37.248c-0.391,0.39-0.392,1.023-0.003,1.414l8.983,9.018
		c0.187,0.188,0.441,0.293,0.707,0.294h0.002c0.265,0,0.518-0.104,0.705-0.292l13.318-13.267l13.268,13.318
		c0.195,0.196,0.452,0.294,0.708,0.294c0.255,0,0.511-0.097,0.706-0.292l9.017-8.982c0.392-0.39,0.393-1.022,0.003-1.414
		L34.421,24.02z"/>
</g>
</svg>
      </a>
      <h2>Success</h2>
      <img class="success" src="http://bibliocrunch.com/wp-content/uploads/2015/02/feeling-mighty-successful.jpg"/>
    </div>
  </div>

Try it Yourself >>

@import url(http://fonts.googleapis.com/css?family=Montserrat:700);
.modal__background {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: 0.35s;
  transition: 0.35s;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.modal__background:target {
  opacity: 1;
  pointer-events: auto;
}

.background {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  background: #FF7300;
  height: 100vh;
  width: 100vw;
}

.button {
  -webkit-transition: 0.25s;
  transition: 0.25s;
  background: #fff;
  border-radius: 4px;
  color: #FF7300;
  display: block;
  font-family: Montserrat,sans-serif;
  margin: auto;
  padding: 1rem;
  text-decoration: none;
}
.button:hover {
  background: #008cff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  color: #fff;
}

.modal__content {
  background: #fff;
  padding: 1rem;
  position: relative;
  z-index: 4;
}
@media screen and (max-width: 699px) {
  .modal__content {
    margin: 2rem;
  }
}
@media screen and (min-width: 700px) {
  .modal__content {
    margin: 4rem auto;
    max-width: 400px;
    min-height: 300px;
  }
}
.modal__content svg,
.modal__content path {
  position: absolute;
  top: 1rem;
  right: 1rem;
  height: 25px;
  width: 25px;
  -webkit-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
  fill: #bfbfbf;
}
.modal__content svg:hover,
.modal__content path:hover {
  fill: #0c0c0c;
}

h2 {
  color: #008cff;
  font-family: Montserrat,sans-serif;
  font-size: 40px;
  margin: 0rem 0 1rem;
  text-align: center;
}

.success {
  width: 100%;
}

Try it Yourself >>