在选择之前显示弹出窗口

Question

我创建了一个弹出窗口，该页面在页面加载时可见，但是应该隐藏起来，直到用户选择菜单项为止。弹出窗口位于html代码中。如何在弹出窗口打开调用提示之前将弹出窗口div隐藏起来？我猜想这是一个相对容易的解决方法，但我仍在学习...

$(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

已将visibility: hidden中的.popup-inner

添加了.show类

默认.popup为display: none;

在“打开和关闭”上添加了click事件监听器和过滤器。

注意：

为代码段演示添加了“打开”链接。

在关闭链接中添加了一些文本，因此对于代码演示来说更容易看到。

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>