Закрыть страницу Mini Pop

Question

Мне нужно, чтобы мой мини-всплывающий ящик закрывался, когда я нажимал на кнопку «Закрыть» и далее.Куда пойдет новый код, закомментировано.Мне нужно добавить больше текста - это то, что он говорит, я не знаю, что еще сказать, потому что я все это освещал, поэтому я надеюсь, что это все.Хорошо, мне нужно добавить больше, хорошо, оба комментария в JavaScript.

function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });
}

let popBox = function(first) {
  if (first === 0) {
    $('body').append('<div class="messagepop pop">\
 		 	<form method="post" id="new_message" action="/messages">\
   		 		<p><label for="question">What is your suvey question?</label><input type="text" size="30" name="question" id="question" /></p>\
   		 		<p><label for="number">How many answers are there possible?</label></p>\
   		 		<p><input type="number" id="optionNum"></p>\
   		 		<p><input type="button" value="Next" onclick="nextFun()"/> or <input type ="button" class="close" value = "Close"/>' + /*this Close button should close the pop up*/ '</p>\
  			</form>\
		</div>');
  } else {
    alert("AHHH");
  }
};

let nextFun = function() {
  //close pop box here
  popBox(1)
};

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

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({
    opacity: 'toggle',
    height: 'toggle'
  }, 'fast', easing, callback);
};

a.selected {
  background-color: #1F75CC;
  color: white;
  z-index: 100;
}

.messagepop {
  background-color: #FFFFFF;
  border: 1px solid #999999;
  cursor: default;
  display: none;
  margin-top: 15px;
  position: absolute;
  text-align: left;
  width: 394px;
  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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="newQuestionBtn" value="&#43;">
<h2>Array of Surveys Here</h2>

Почему мне нужно добавить еще больше деталей?Напишите мне, если у вас есть еще вопросы.