프로그래밍 공부 일기

팝업 만드는 법

<div class="travel">
  <img src="../photo/travel.PNG" class="button buttonTravel">

  <div class="pop_up popTravel">
    <div class="contentPopup">
      <a href="https://mzmz02.github.io/travel/" target="_blank">
        <img src="../photo/travel.PNG">
      </a>

      <h2>Europe Travel</h2>
      <h3>使用言語：HTML/CSS/jQuery</h3>
      <h3><a class="github" href="https://github.com/mzmz02/travel" target="_blank"><span class="fab fa-github"></span>GitHubページ</a> </h3>
    </div>
  </div>
</div>

.pop_up{
    display:none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(227, 246, 245, 0.6);
    z-index: 2;
}

// 画像をクリックでポップアップを表示
$('.buttonTravel').click(function(){
  $('.popTravel').fadeIn();
});

범위를 벗어난 클릭으로 팝업 닫기

// クリックイベント全てに対しての処理
$(document).on('click touchend', function(event) {
  // 表示したポップアップ以外の部分をクリックしたとき
  if (!$(event.target).closest('.buttonTravel').length) {
    $('.popTravel').fadeOut();
  }
});