После нажатия кнопки "Начать играть", окно не открывается

[Troy Lewis]

Всем привет! Почему-то когда нажимаю на копку "Начать играть", окно не открывается. Что делать?


HTML:

        <div class="s-btn">
          <a href="#how-to-start" class="btn">Начать играть</a>
        </div>

      <div id="how-to-start">
        <div class="how-to">
          <h2>тест</h2>
            <h3>тест</h3>
      </div>
      </div>

CSS:

#how-to-start {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .8);
}

.dowl-btn {
  margin-top: 34px;
  padding-left: 42px;
}

.how-to {
  border-radius: 18px;
	position: absolute;
	width: 700px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 40px;
	box-sizing: border-box;
	background-color: #fff;
	color: #29272D;
  box-shadow: 0 6px 55px #29272D;
  text-align: center;
  text-transform: uppercase;
}

.how-to h3 {
  font: 18px/22px 'TT Norms', sans-serif;
  text-transform: none;
  margin-top: -24px;
  font-size: 16px;
}

.how-to h4 {
  margin-top: 40px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #D0D0D0;
}

JS:

$('.btn').click(function() {
	$('#how-to-start').fadeIn();
	$('#how-to-start').addClass('disabled');
}); // Чтобы открыть окно по кнопке

$('.close').click(function() {
	$('#how-to-start').fadeOut();

}); // Чтобы закрыть окно по крестику

$(document).mouseup(function (e) {
	var popup = $('.how-to');
	if (e.target!=popup[0]&&popup.has(e.target).length === 0){
		$('#how-to-start').fadeOut();
	}
});  // Чтобы закрыть окно по клику за пределом окна