popup displays before selected

Question

I have created a popup that is visible when the page loads but it should be hidden until the user selects the menu item. The popup contect is located in the html code. How can I keep that popup div hidden until prompted with the popup-open call? I'm guessing that this is a relatively easy fix, but I'm still learning...

$(function() {
  //----- OPEN
  $('[data-popup-open]').on('click', function(e) {
    var targeted_popup_class = jQuery(this).attr('data-popup-open');
    $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);

    e.preventDefault();
  });

  //----- CLOSE
  $('[data-popup-close]').on('click', function(e) {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

    e.preventDefault();
  });
});

.popup {
  display: block;
  position: fixed;
  left: 20%;
  right: 20%;
  top: 20%;
  bottom: 20%;
}

.popup-inner {
  max-width:60%;
  max-height:60%;
  /* padding:40px; */
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  box-shadow:0px 2px 6px rgba(0,0,0,1);
  border-radius:3px;
  color: orange;
  font-size: 4vh;
  background: rgba(0, 0, 0, 0.8);  
  border: 3px solid orange;
  border-radius: 10px;
  border-color: orange;
  overflow: visible; 
  visibility: hidden;
}

/* Close Button */
.popup-close {
  height:4vh;
  width:4vh;  
  background-image: url("../images/close.png");
  background-repeat: no-repeat;
  background-image: contain;
  /*	background-size: 4vh;*/
  object-fit: auto; 
  overflow:visible; 
  /*	padding-top:4px;  */
  display:inline-block; 
  position:absolute;
  top:0px;
  right:0px;
  transition:ease 0.25s all;
  -webkit-transform:translate(50%, -50%); 
  transform:translate(50%, -50%);  
  border-radius:1000px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup" data-popup="popup-1">
	
  <div class="popup-inner"> 
    <p>
      <table>
        <tr>
          <td>auto</td>
          <td>this is a description.</td>
          <td>07/05/2016</td>
        </tr>	
        <tr>
          <td>make</td>
          <td>this is a description.</td>
          <td>07/12/2016</td>
        </tr>
        <tr>
          <td>model</td>
          <td>this is a description.</td>
          <td>07/19/2016</td>
        </tr>
      </table>
    </p>
    <a class="popup-close" data-popup-close="popup-1" href="#"></a> 
  </div>
</div>

Answer 1

Removed visibility: hidden from .popup-inner

Added .show class

Defaulted .popup to display: none;

Added a click event listener and filter on the Open and Close.

NOTES:

Added an Open link for the snippet demo.

Added some text to the close link, so it is more easily visible for the code demo.

document.addEventListener('click', (e) => {
  if(e.target.matches('.pop-open')) {
    document.querySelector('.popup').classList.add('show');
  }
  
  if(e.target.matches('.popup-close')) {
    document.querySelector('.popup').classList.remove('show');
  }
});

.popup {
  position: fixed;
  left: 20%;
  right: 20%;
  top: 20%;
  bottom: 20%;
  display:none;
}

.popup-inner {
  max-width: 60%;
  max-height: 60%;
  /* padding:40px; */
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 1);
  border-radius: 3px;
  color: orange;
  font-size: 4vh;
  background: rgba(0, 0, 0, 0.8);
  border: 3px solid orange;
  border-radius: 10px;
  border-color: orange;
  overflow: visible;
}


/* Close Button */

.popup-close {
  height: 4vh;
  width: 4vh;
  background-image: url("../images/close.png");
  background-repeat: no-repeat;
  background-image: contain;
  /*	background-size: 4vh;*/
  object-fit: auto;
  overflow: visible;
  /*	padding-top:4px;  */
  display: inline-block;
  position: absolute;
  top: 0px;
  right: 0px;
  transition: ease 0.25s all;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  border-radius: 1000px;
  cursor: pointer;
}

.show {
  display: block;
}

<a href="#" class="pop-open">Open</a>
<div class="popup" data-popup="popup-1">
  <div class="popup-inner">
    <p>
      <table>
        <tr>
          <td>auto</td>
          <td>this is a description.</td>
          <td>07/05/2016</td>
        </tr>
        <tr>
          <td>make</td>
          <td>this is a description.</td>
          <td>07/12/2016</td>
        </tr>
        <tr>
          <td>model</td>
          <td>this is a description.</td>
          <td>07/19/2016</td>
        </tr>
      </table>
    </p>
    <a class="popup-close" data-popup-close="popup-1" href="#">Close</a>
  </div>
</div>