manhbi18112005/index.html

## index.html
<body>
  <header class="header">
    <div class="container">
      <figure class="avatar">
        <img src="https://scontent-sin6-1.xx.fbcdn.net/v/t1.0-9/15977755_10207841229656791_4781027181067511410_n.jpg?oh=3d09a537577b5d916689bc1b8a8d6d28&oe=5965881F" alt="" />
      </figure>
      <h1>AgilBAKA</h1>
      <span id="edit">Edit profile</span>
    </div>
  </header>

  <!-- content pop up  -->
  <div class="box-modal">
    <div class="overlay"></div>
    <div class="body-modal">
      <div class="inner-body-modal">
          hello it's me
      </div>
    </div>
  </div>

</body>

## pop-up-with-blurred-background.markdown

      
    Raw
  

              pop-up-with-blurred-background.markdown
            
          
    pop up with blurred background

A Pen by Devi Krisdiansyah on CodePen.
License.

  
## script.js
$('#edit').on('click', function(){
  $('body').addClass('active-modal');
  $('.box-modal').addClass('modal-show');
});

$('.overlay').on('click', function(){
  $('body').removeClass('active-modal');
  $('.box-modal').removeClass('modal-show');
})

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.js"></script>

## style.scss
$font: 'Oxygen', sans-serif;

* {
  padding:0;
  margin:0;
  box-sizing:border-box;
}

body {
  font-family:$font;

  &.active-modal {
    overflow:hidden;
    header.header {
      transition:0.2s;
      -webkit-filter: blur(2px);
      filter: blur(2px);
    }
  }
}

header.header {
  width :100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  transition:0.2s;
  background: url('https://images.pexels.com/photos/129105/pexels-photo-129105.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb')no-repeat center center;
  background-size:cover;
}

.container {
  .avatar {
    width:120px;
    height:120px;
    overflow:hidden;
    border-radius:100%;
    margin-bottom:15px;
    img {
      width:100%;
      height:100%;
      object-fit:cover;
      border:none;
    }


  }

   span {
      display:inline-block;
      background:#fff;
      border-radius:100px;
      padding:10px 20px;
      font-size:11px;
      font-weight:700;
      margin-top:10px;
      cursor:pointer;
    }

}

.box-modal {
  position:fixed;
  width:100%;
  height:100vh;
  left:0px;
  top:0px;
  visibility:hidden;
  .overlay {
    position:absolute;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    background:#000;
    opacity:0;
    transition:opacity 1.3s;
  }

  .body-modal {
    max-height:0px;
    opacity:0;
    overflow:hidden;
    .inner-body-modal {
      background:#fff;
      padding:25px;
      border-radius: 8px;
      position:relative;
      z-index:1;
      box-shadow:0px 0px 65px 0px rgba(0, 0, 0, 0.43);
    }
  }

   &.modal-show {
    display:flex;
    align-items:center;
    justify-content:center;
     visibility:visible;
     transition:all 0.9s;
    .overlay {
      opacity:0.5;
      transition:opacity 1.3s;
    }

     .body-modal {
       max-height:1000px;
       opacity:1;
       transition:0.3s max-height 0.8s, 0.3s opacity 0.6s, ;
     }
  }

}
	<body>
	<header class="header">
	<div class="container">
	<figure class="avatar">
	<img src="https://scontent-sin6-1.xx.fbcdn.net/v/t1.0-9/15977755_10207841229656791_4781027181067511410_n.jpg?oh=3d09a537577b5d916689bc1b8a8d6d28&oe=5965881F" alt="" />
	</figure>
	<h1>AgilBAKA</h1>
	<span id="edit">Edit profile</span>
	</div>
	</header>

	<!-- content pop up -->
	<div class="box-modal">
	<div class="overlay"></div>
	<div class="body-modal">
	<div class="inner-body-modal">
	hello it's me
	</div>
	</div>
	</div>

	</body>
	$('#edit').on('click', function(){
	$('body').addClass('active-modal');
	$('.box-modal').addClass('modal-show');
	});

	$('.overlay').on('click', function(){
	$('body').removeClass('active-modal');
	$('.box-modal').removeClass('modal-show');
	})
	$font: 'Oxygen', sans-serif;

	* {
	padding:0;
	margin:0;
	box-sizing:border-box;
	}

	body {
	font-family:$font;

	&.active-modal {
	overflow:hidden;
	header.header {
	transition:0.2s;
	-webkit-filter: blur(2px);
	filter: blur(2px);
	}
	}
	}

	header.header {
	width :100%;
	height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	position:relative;
	transition:0.2s;
	background: url('https://images.pexels.com/photos/129105/pexels-photo-129105.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb')no-repeat center center;
	background-size:cover;
	}

	.container {
	.avatar {
	width:120px;
	height:120px;
	overflow:hidden;
	border-radius:100%;
	margin-bottom:15px;
	img {
	width:100%;
	height:100%;
	object-fit:cover;
	border:none;
	}



	}

	span {
	display:inline-block;
	background:#fff;
	border-radius:100px;
	padding:10px 20px;
	font-size:11px;
	font-weight:700;
	margin-top:10px;
	cursor:pointer;
	}

	}

	.box-modal {
	position:fixed;
	width:100%;
	height:100vh;
	left:0px;
	top:0px;
	visibility:hidden;
	.overlay {
	position:absolute;
	width:100%;
	height:100%;
	left:0px;
	top:0px;
	background:#000;
	opacity:0;
	transition:opacity 1.3s;
	}

	.body-modal {
	max-height:0px;
	opacity:0;
	overflow:hidden;
	.inner-body-modal {
	background:#fff;
	padding:25px;
	border-radius: 8px;
	position:relative;
	z-index:1;
	box-shadow:0px 0px 65px 0px rgba(0, 0, 0, 0.43);
	}
	}

	&.modal-show {
	display:flex;
	align-items:center;
	justify-content:center;
	visibility:visible;
	transition:all 0.9s;
	.overlay {
	opacity:0.5;
	transition:opacity 1.3s;
	}

	.body-modal {
	max-height:1000px;
	opacity:1;
	transition:0.3s max-height 0.8s, 0.3s opacity 0.6s, ;
	}
	}

	}