모달 팝업 배경 클릭 활성화

모달 팝업 배경 부분을 비활성화시키기도 하지만 반대로 활성화해야 할 경우도 있습니다. 그럴 경우 .modal의 pointer-events를 none로 설정합니다.

 

설정

.modal {
  pointer-events: none;
  /* background clickable */
}

 

적용

/* modal */

.modal {
  display: block;
  /* position: relative; */
  pointer-events: none;
  /* background clickable */
}

.modal-backdrop {
  /* display: block; 검은색레이어*/
  display: none;
  /* background clickable */
}

#myModal {
  /* 배경 */
  width: 100%;
  height: 100%;
}

.modal-dialog {
  padding: 10px;
  /* 팝업창 넓이: 특정 DIV에 맞출 것 */
  /* 팝업창 높이: 특정 DIV에 맞출 것 */
  position: fixed;
  /* 팝업창 초기 위치 */
  /* 팝업 닫기 전 위치도 저장해둘 것*/
  top: 12px;
}

.modal-content {
  padding: 0px;
}