step walkthrough

by Jesse M

HTML

<div class="overlay">
  <div class="tip-box">
    <p>This is step one, click me</p>
  </div>
  <div class="tip-box">
    <p>This is step two, click me</p>
  </div>
  <div class="tip-box">
    <p>This is step three, click me</p>
  </div>
</div>

<button>Show Overlay</button>

CSS

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica, sans-serif;
}

.overlay {
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 100;
}

.tip-box {
  background: #ff8a2b;
  border-radius: 8px;
  padding: 15px 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  color: #fff;
  width: 80%;
  max-width: 400px;
  position: absolute;
  z-index: 101;
}

.tip-box p {
  margin: 0;
}

.tip-box:nth-child(1) {
  top: 20%;
  left: 5%;
}

.tip-box:nth-child(2) {
  top: 40%;
  right: 10%;
}

.tip-box:nth-child(3) {
  top: 30%;
  left: 25%;
}

.tip-box:nth-child(n+2) {
  display: none;
}

JavaScript

$('button').click(function(){
	$('.overlay').fadeIn('fast');
});

$('.tip-box').click(function(){
	if($(this).is(':last-child')){
		$('.overlay, .tip-box').fadeOut();
    $('.tip-box:first-child').delay(500).fadeIn();
  }else{
		$(this).fadeOut().next().fadeIn('fast');
  }
});