uAsessor Test - Banners

uAsessor Test: Default uCoz adv banners

by Alexander Lashchevsky

HTML

<input type="button" class="asTest-button" value="Показать окно">

<div class="asTest-window">
  <div class="asTest-inner">
    <div class="asTest-site">
      <label class="asTest-banner" id="asTest-banner-1" for="asTest-checkbox-1"></label>
      <label class="asTest-banner" id="asTest-banner-2" for="asTest-checkbox-2"></label>
      <label class="asTest-banner" id="asTest-banner-3" for="asTest-checkbox-3"></label>
      <label class="asTest-banner" id="asTest-banner-4" for="asTest-checkbox-4"></label>
      <label class="asTest-banner" id="asTest-banner-5" for="asTest-checkbox-5"></label>
      <label class="asTest-banner" id="asTest-banner-6" for="asTest-checkbox-6"></label>
      <label class="asTest-banner" id="asTest-banner-7" for="asTest-checkbox-7"></label>
      <label class="asTest-banner" id="asTest-banner-8" for="asTest-checkbox-8"></label>
      <label class="asTest-banner" id="asTest-banner-9" for="asTest-checkbox-9"></label>
      <label class="asTest-banner" id="asTest-banner-10" for="asTest-checkbox-10"></label>
      <label class="asTest-banner" id="asTest-banner-11" for="asTest-checkbox-11"></label>
      <label class="asTest-banner" id="asTest-banner-12" for="asTest-checkbox-12"></label>
    </div>
  </div>
</div>

<div class="asTest-checkboxes">
  <input type="checkbox" class="asTest-checkbox" name="" id="asTest-checkbox-1" value="1">
  <input type="checkbox" class="asTest-checkbox" name="" id="asTest-checkbox-2" value="2">
  <input type="checkbox" class="asTest-checkbox" name="" id="asTest-checkbox-3" value="3">
  <input type="checkbox" class="asTest-checkbox" name="" id="asTest-checkbox-4" value="4">
  <input type="checkbox" class="asTest-checkbox" name="" id="asTest-checkbox-5" value="5">
  <input type="checkbox" class="asTest-checkbox" name="" id="asTest-checkbox-6" value="6">
  <input type="checkbox" class="asTest-checkbox" name="" id="asTest-checkbox-7" value="7">
  <input type="checkbox" class="asTest-checkbox" name=""...

CSS

.asTest-window {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
}

.asTest-inner {
  position: absolute;
  top: 5vh;
  left: 50%;
  width: 962px;
  max-height: 90vh;
  margin-left: -481px;
  overflow: auto;
}

.asTest-site {
  width: 100%;
  height: 714px;
  background: #fff url('http://alexanevskydemo.ucoz.com/demo/test-banners.jpg') no-repeat top left;
}

.asTest-checkboxes {
  /* display: none; */
}

.asTest-banner {
	position: absolute;
	transition: background-color .15s;
}
.asTest-banner#asTest-banner-1 {
	top: 0;
	left: 722px;
	width: 240px;
	height: 450px;
	border-radius: 5px;
}
.asTest-banner#asTest-banner-2 {
	top: 503px;
	left: 730px;
	width: 200px;
	height: 200px;
}
.asTest-banner#asTest-banner-3 {
	top: 196px;
	left: 30px;
	width: 638px;
	height: 115px;
}
.asTest-banner#asTest-banner-4 {
	top: 556px;
	left: 120px;
	width: 88px;
	height: 31px;
}
.asTest-banner#asTest-banner-5 {
	top: 556px;
	left: 212px;
	width: 88px;
	height: 31px;
}
.asTest-banner#asTest-banner-6 {
	top: 556px;
	left: 304px;
	width: 88px;
	height: 31px;
}
.asTest-banner#asTest-banner-7 {
	top: 556px;
	left: 396px;
	width: 88px;
	height: 31px;
}
.asTest-banner#asTest-banner-8 {
	top: 556px;
	left: 488px;
	width: 88px;
	height: 31px;
}
.asTest-banner#asTest-banner-9 {
	top: 599px;
	left: 228px;
	width: 80px;
	height: 15px;
}
.asTest-banner#asTest-banner-10 {
	top: 599px;
	left: 308px;
	width: 80px;
	height: 15px;
}
.asTest-banner#asTest-banner-11 {
	top: 599px;
	left: 388px;
	width: 80px;
	height: 15px;
}
.asTest-banner#asTest-banner-12 {
	top: 587px;
	left: 14px;
	width: 107px;
	height: 117px;
	border-radius: 12px;
}
.asTest-banner.checked {
	background: rgba(0,0,0,.15) url('http://alexanevskydemo.ucoz.com/demo/test-banner-check.png') no-repeat center center;
}
.asTest-banner:hover {
	background-color: rgba(0,0,10,.3);
	cursor: pointer;
}

JavaScript

$('.asTest-button').click(function(event) {
  $('.asTest-window').fadeIn();
});

$('.asTest-window').click(function(event) {
  if ($(event.target).hasClass('asTest-window')) {
    $('.asTest-window').fadeOut();
  };
});

$('.asTest-banner').click(function(event) {
  $(this).toggleClass('checked');
});