Popup show/hide

                    
<div id="wrap">                      
  <div class="popup">
    <div class="head">
      <p>Title</p>
      <button type="button" class="btnClose">
      <svg id="_16_x" data-name="16 / x" width="22" height="22" viewBox="0 0 16 16">
        <path id="icon" d="M5.707,7.121,1.414,11.414,0,10,4.293,5.707,0,1.414,1.414,0,5.707,4.293,10,0l1.414,1.414L7.121,5.707,11.414,10,10,11.414,5.707,7.121Z" transform="translate(2.293 2.293)"></path>
      </svg>
        <span class="hidden">팝업 닫기</span>
      </button>
    </div>
    <div class="cont">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur molestias perferendis dolore sapiente? Voluptas eum temporibus dolorem eius, sapiente maxime, fuga minus repellendus eveniet unde quia quis officiis fugiat dicta.</p>
    </div>
  </div>
  <div class="exDimmed"></div>
  <button type="button" class="btnShowHide">팝업 열기</button>
</div>

                    
#wrap{position: relative;
  .popup{position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; box-shadow: 0px 0px 8px rgba($color: #000, $alpha: 0.35); display: none; width: 300px; border-radius: 4px;
  .head{height: 50px; line-height: 50px; padding: 0 15px; box-sizing: border-box; border-radius: 4px 4px 0 0;
  color: $cfff; font-family: $d-fz; font-size: 1em; background-color: $blueBg;
    .btnClose{position: absolute; top: 5px; right: 10px; color: #fff;
      svg{fill: currentColor;}
    }
}
.cont{padding: 20px; box-sizing: border-box; border-radius: 0 0 4px 4px; 
font-family: $d-fz; font-size: 0.88em; background-color: $whiteBg;}
}

.btnShowHide{position: absolute; top: 620px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; 
justify-content: center; height: 50px; line-height: 50px;padding: 0 20px; box-sizing: border-box; border-radius: 4px; 
font-family: $d-fz; font-size: 1em; color: $cfff; background-color: $blueBg;}
.exDimmed{display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0,0.6);}
}

                    
#wrap {
  position: relative;
}

#wrap .popup {
  display: none;
  position: fixed; 
  top: 50%; 
  left: 50%; 
  -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.35);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.35);
  width: 300px;
  border-radius: 4px;
  z-index: 10000;
}

#wrap .popup .head {
  height: 50px;
  line-height: 50px;
  padding: 0 15px;
  -webkit-box-sizing: border-box;
      box-sizing: border-box;
  border-radius: 4px 4px 0 0;
  color: #fff;
  font-family: "Noto Sans";
  font-size: 1em;
  background-color: #266bf7;
}

#wrap .popup .head .btnClose {
  position: absolute;
  top: 5px;
  right: 10px;
  color: #fff;
}

#wrap .popup .head .btnClose svg {
  fill: currentColor;
}

#wrap .popup .cont {
  padding: 20px;
  -webkit-box-sizing: border-box;
      box-sizing: border-box;
  border-radius: 0 0 4px 4px;
  font-family: "Noto Sans";
  font-size: 0.88em;
  background-color: #fff;
}

#wrap .btnShowHide {
  position: absolute;
  top: 620px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
      align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
      justify-content: center;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  -webkit-box-sizing: border-box;
      box-sizing: border-box;
  border-radius: 4px;
  font-family: "Noto Sans";
  font-size: 1em;
  color: #fff;
  background-color: #266bf7;
}

#wrap .exDimmed {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

                    
$(function(){
    $('.btnShowHide').on({
        "click":function(){
            $('.popup').show();
            $('.exDimmed').show();
        }
    });

    $('.btnClose').on({
        "click":function(){
            $('.popup').hide();
            $('.exDimmed').remove();
        }
    });
});

다운로드

Esc 혹은 우측 상단 X 버튼을 눌러 결과창을 닫을 수 있습니다.