on click problem

by Deborah

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

 
    <div>
      Here's a bit of content. Some background content here.
    </div>
    <a class="buttonly" id="theButton">Open Modal!!!</a>

      <!-- modal -->
      <div class="modal out">
        <div class="modal-content">
          <div class="modal-body">
            <a class="close">&times;</a>
            <div>The modal opened!</div>
            <a class="buttonly" href="#">Take an action</a>
          </div>
        </div>
      </div>
      <div class="modal-backdrop out"></div>
      <!-- end modal -->

CSS

body {
  font-family: "Arial";
  font-size: 36px;
  text-align: center;
  background: #ffffff;
  }
  
.buttonly, a {
  cursor: pointer;
}
  
.buttonly {
   font-size: 18px;
   text-decoration: none;
   color: #fff;
   margin: 1em;
   padding: 10px; 
   display: inline-block;
   background: #ff0099;
  }

/* modal */

.modal.out,
.modal-backdrop.out {
	display: none;
}


.modal-backdrop,
.modal {
	position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
}

.modal-backdrop {
	z-index: 1030;
	background-color: #000000;
	opacity: .5;
  transition: all 0.1s ease-in-out; 
}

.modal-backdrop.out {
	opacity: 0;
}

.modal {
	display: flex;
	z-index: 1040;
}

.modal-content {
	margin: auto;
  background: #ffffff;
}

.modal-body {
  font-size: 30px;
	text-align: center;
	padding: 2em;
	position: relative;
}

a.close {
	padding: 20px;
	display: inline-block;
	position: absolute;
		top: -30px;
		right: 0;
}

JavaScript

$(document).ready(function() {
  
  //***** modal *****//
	
	//if click button, modal in
	$( '#theButton' ).on('click', function openModal() {
		console.log('modal should open');
		$( '.modal-backdrop' ).removeClass('out');
		$( '.modal' ).removeClass('out');
	});
	
	//modal out function 
	function removeModal(){
		console.log('modal should remove');
		$( '.modal' ).addClass('out');
		$( '.modal-backdrop' ).addClass('out');
	}
	
	//if "close" or click away from window content, modal out
	$( '.close' ).on('click', removeModal);
	$( '.modal .buttonly' ).on('click', removeModal);
  
});