Drag popup

해당 드래그 팝업 예제는 Jquery ui draggable 라이브러리를 사용하였습니다.

                    
<div id="wrap">
    <div class="popup" id="drag">
        <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>
</div>

                                  
#wrap{position: relative;
    .popup{position: fixed; top: 40%; left: calc(50% - 150px); transform: inherit; z-index: 10000; box-shadow: 0px 0px 8px rgba($color: 
        #000, $alpha: 0.35); 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: 16px; 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: 14px; background-color: $whiteBg;}
    }

    .exDimmed{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 {
  position: fixed; 
  top: 40%;
  left: calc(50% - 150px);
  -webkit-transform: inherit;
      transform: inherit;
  -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: 16px;
  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: 14px;
  background-color: #fff;
}

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

                      
$(function(){
    $('#drag').draggable({
        cancel:'.cont',
        containment: "window"
    });
});

다운로드

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