ben-g
2/2/2017 - 7:32 PM

A pop up text box using jQuery. (source: http://stackoverflow.com/questions/1328723/how-to-generate-a-simple-popup-using-jquery)


$(document).ready(function () {
  $('.next').on('click', function () {
    var current = $(this).data('currentBlock'),
      next = $(this).data('nextBlock');


//Pop up for disclaimer info
function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
}

$(function() {
  $('#disclaimer').on('click', function() {
    if($(this).hasClass('selected')) {
      deselect($(this));               
    } else {
      $(this).addClass('selected');
      $('.pop').slideFadeToggle();
    }
    return false;
  });

  $('.close').on('click', function() {
    deselect($('#disclaimer'));
    return false;
  });
});
$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
});
<!-- Pop Up Disclaimer -->
<div class="messagepop pop">
 <ul class="bulleted-list">
<small><li>After successfully completing the first two consecutive terms as an online student in an eligible program, the student will be eligible to receive a $250 grant per online course for the next four courses.</li>
<li>Eligible grant recipients must maintain continuous enrollment in their online programs and be enrolled in at least six hours per term. No drops, withdrawals or transfers to on ground programs are permitted.</li>
<li>Students who drop or withdraw are ineligible for the grant.</li>
<li>To maintain grant eligibility, the student must maintain satisfactory academic progress and financial standing throughout the grant enrollment period, as defined by CTX.</li>
<li>Grant is non-stackable. It cannot be combined with any other scholarship, grant or discount.</li>
<li>The offer is an institutional grant and may be used for tuition and fees only.  Grant may be reduced based on other financial aid a student receives. In addition, other financial aid, such as loans, may be adjusted once this grant is applied</li>
<li>TLH will deliver to CTX an invoice within 14 days following the beginning of a term. Included in this invoice will be a list of the students who meet these eligibility requirements for the grant and the dollar amount to be awarded to each student.</li>
<li>CTX will distribute the grant funds to student accounts.</li>
<li>Once grant have been disbursed, CTX will issue an invoice to TLH for the total dollar amount awarded. </li>
<li>All graduate education and KTA programs are excluded.</li>
<li>TLH and CTX agree to equally share the cost of the Get Started Now grant, with TLH paying $125 per online course for four courses and CTX paying $125 per online course for four courses</li>
<li>Offer not valid for employees, employees’ spouses, or employees’ dependents.</li></small>
<a class="close" style="background: #ffd350; color: #000000;" href="/">X</a></p>
</ul>
</div>
<p><a href=/" id="disclaimer">Disclaimer Info</a></p>
</div><!-- End Pop up -->
/* Pop Up */
a.selected {
  background-color:#4f2684;
  color:white;
  z-index:100;
}

a#disclaimer {
text-decoration: none;
width: 100%;
}
a#disclaimer.selected {
border: 1px solid transparent;
border-radius: 0;
line-height: 2;
margin: 20px 0 0 0;
padding: 5px 20px;
text-align: center; 
vertical-align: middle;
white-space: nowrap;
}

.messagepop {
  background-color:#FFFFFF;
  border:1px solid #999999;
  cursor:default;
  display:none;
  margin-top: 15px;
  position:relative;
  text-align:left;
  z-index:50;
  padding: 25px 25px 20px;
}

label {
  display: block;
  margin-bottom: 3px;
  padding-left: 15px;
  text-indent: -15px;
}

.messagepop p, .messagepop.div {
  border-bottom: 1px solid #EFEFEF;
  margin: 8px 0;
  padding-bottom: 8px;
}