JSFiddle - React, Tailwind, and code Playground

by Matt Hopkins

HTML

<label id="agreeYes">
  <input type="checkbox" id="agreeCheckbox"><span>YES Simon! Start my $1.00 trial today, and if I decide to continue after 14 days I'll secure my mentoring discount of $67 / month (Cancel at any time).</span>
</label>

CSS

@supports (zoom:2) {
  #agreeYes input[type=checkbox] {
    zoom: 2;
  }
}

@supports not (zoom:2) {
  #agreeYes input[type=checkbox] {
    transform: scale(2);
    margin: 15px;
  }
}

#agreeYes {
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;
  font-size: 28px;
  padding: 10px;
}

#confirmModalBG {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

#confirmModal {
  width: 70vw;
  max-width: 400px;
  padding: 25px;
  text-align: center;
  background: #fff;
  border-radius: 5px;
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
}

#confirmModal span {
  font-size: 28px;
  line-height: 28px;
}

#confirmModal a {
  display: block;
  margin: 25px auto 0;
  width: 80px;
  padding: 15px 20px;
  background: #3d8e00;
  color: #fff;
  text-decoration: none;
  font-size: 28px;
  border-radius: 5px;
}

JavaScript

var targetOffset;

function acceptCheck(e) {
  var agreeCheckbox = document.getElementById("agreeCheckbox");
  if (agreeCheckbox.checked) {
    return true;
  } else {
    e.preventDefault();
    mustAccept();
    return false;
  }
}

function mustAccept() {
  $('body').append('<div id="confirmModalBG"><div id="confirmModal"><span>You must read and agree to the terms and conditions.</span><a href="javascript:closeModal()">Ok</a></div></div>');
  $('body').on('click', '#confirmModalBG, #confirmModal', function(){
  	closeModal();
  });
}

function closeModal() {
	$('#confirmModalBG').remove();
  $('#agreeYes').css('background-color', '#fcfc7e');
  window.location.href = "#agreeCheckbox";
}

$(function() {
    $('#link-1531-449, #link-7929-432, #link-1982-158, #tmp_button-90712').on('click', function(e) {
  acceptCheck(e);
});
});