그냥 정말 갑자기 급 WordPress 싱글 포스트에 모달창을 추가로 넣고 싶어졌다.
가능한 WordPress에 플러그인은 최소화하는 것이 목표다.
모달 코드는 이전에 공부했던 것들을 참고하여 내가 새롭게 코드를 다시 짰다.
목차
Chapter 1.
HTML
포스트에 글을 올릴 때 HTML을 어떻게 사용하면 될지 알아보자.
Chapter 2.
CSS
CSS 스타일을 지정하여 모달을 숨기고 보이게 할 수 있다.
Chapter 3.
jQuery
jQuery를 이용하여 모달을 표시할 수 있게 하고 모달 열었을 때 백그라운드 스크롤되지 않게 해보자.
Chapter 4.
WordPress에 적용
완성된 파일을 저장하여 코드를 사용해보자.
모달
모달이란, 새로운 윈도우를 여는 팝업이 아닌 현재 페이지의 앞쪽에 다른 화면을 만들어 보여주는 창을 의미한다.
만들고 싶은 모달을 정리해보자.
- 모달을 열면 주변 배경이 오버레이된다.
- 오버레이된 부분을 클릭하면 닫힌다.
- 오버레이된 부분의 우측 상단에 흰색으로 닫힘 버튼(✕)이 들어가있다.
- 모달 안의 내용이 길어질 경우 스크롤이 생겼으면 좋겠다.
- 이미지의 경우 이미지를 클릭해도 닫힌다.
- 간편하게 멀티 모달을 만들 수 있다.
- 다크 모드 지원된다.
- 모달이 열리면 뒤에있는 화면은 스크롤을 할 수 없다.
- 코드를 심플하게 그리고 유지보수하기 편하게 짜자.
완성된 모달 열기
모달 창 입니다.
HTML
모달 실행시 주변 배경이 흐려지 코드
<div class="overlay"><span class="close"></span></div>
사용된 코드 설명
<div class=”overlay”></div>
:
모달 뒤에 깔리는 배경을 만드는 코드, 모달을 여러개 만들더라도 이 코드는 한 번만 넣어주면 된다.
<span class=”close”></span>
:
모달을 닫는 버튼을 만드는 코드
정보 모달 보여주는 코드
<a class="modal-open" data-open="info-1">Modal</a> <div class="modal-container"> <div class="modal" id="info-1"> <p>모달 창 입니다.</p> </div> </div>
사용된 코드 설명
<a class=”modal-open” data-open=”info-1″>Modal</a>
:
모달을 띄우기 위한 코드. data-*(데이터셋 속성)을 이용하여 멀티 모달을 만들자. data-open 처럼 data- 뒤의 * 에는 원하는 이름 아무거나 넣어도 된다. info-1은 내가 지정한 이름으로 원하는 이름으로 변경이 가능하며 info-2, info-3 이런 식으로 모달을 추가할 수 있다.
<div class=”modal-container”>
:
모달을 가운데 정렬하기 위해 어쩔 수 없이 끼워 넣은 컨테이너다. 이거 없이 top, left, transform을 이용하면 모달 크기가 화면 전체의 절반을 넘지 않는다. 컨테이너 없이 만약 top, left, transform을 이용한다면 width 값을 지정하면 되는데 그렇게 되면 불필요하게 창이 확대된다.
<div class=”modal” id=”info-1″>
:
모달 코드. 모달에 넣고싶은 정보를 이 안에 넣자. id=”info-1″은 data-open=”info-1″로 지정해준 값을 가져왔다. data-open=”info-1″로 지정한 요소를 클릭하면 id=”info-1로 지정한 모달이 열린다.
이미지 모달 보여주는 코드
<p><a class="modal-open" data-open="image-1"><img src="https://www.w3schools.com/howto/img_fjords.jpg" class="original-image" alt="첫번째 이미지 입니다."></a></p> <div class="modal-container"> <div class="modal" id="image-1"> <img class="modal-image" alt=""> </div> </div>
사용된 코드 설명
<p><a class=”modal-open” data-open=”image-1″>
:
모달을 띄우기 위한 코드. data-*(데이터셋 속성)을 이용하여 멀티 모달을 만들자. data-open 처럼 data- 뒤의 * 에는 원하는 이름 아무거나 넣어도 된다. image-1은 내가 지정한 이름으로 원하는 이름으로 변경이 가능하며 image-2, image-3 이런 식으로 모달을 추가할 수 있다.
<img src=”https://www.w3schools.com/howto/img_fjords.jpg” class=”original-image” alt=”첫번째 이미지 입니다.”></a>
:
이미지를 클릭하여 이 이미지가 들어간 모달을 띄운다. alt=”” 안에 들어간 속성 값도 자동으로 복사 된다.
<div class=”modal-container”>
:
모달을 가운데 정렬하기 위해 어쩔 수 없이 끼워 넣은 컨테이너다. 이거 없이 top, left, transform을 이용하면 모달 크기가 화면 전체의 절반을 넘지 않는다. 컨테이너 없이 만약 top, left, transform을 이용한다면 width 값을 지정하면 되는데 그렇게 되면 불필요하게 창이 확대된다.
<div class=”modal” id=”image-1″>
:
모달 코드. id=”image-1″은 data-open=”image-1″로 지정해준 값을 가져왔다. data-open=”image-1″로 지정한 요소를 클릭하면 id=”image-1로 지정한 모달이 열린다.
<img class=”modal-image” alt=””>
:
클릭한 이미지를 모달에서 보여준다.
HTML 파일 만들기
먼저 위에서 정리한 코드를 추가하여 HTML로 틀을 만들어 보자.
modal.html 예시
<!doctype html> <html> <head> <meta charset="utf-8"> <title>모달 예시</title> <link rel="stylesheet" href="modal.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> </head> <body> <div class="modal-overlay"><span class="modal-close"></span></div> <p><a class="modal-open" data-open="image-1"><img src="https://www.w3schools.com/howto/img_fjords.jpg" class="original-image" alt="첫번째 이미지 입니다."></a></p> <div class="modal-container"> <div class="modal" id="image-1"> <img class="modal-image" alt=""> </div> </div> <p><a class="modal-open" data-open="image-2"><img src="https://www.w3schools.com/howto/img_nature_wide.jpg" class="original-image" alt="두번째 이미지 입니다."></a></p> <div class="modal-container"> <div class="modal" id="image-2"> <img class="modal-image" alt=""> </div> </div> <p><a class="modal-open" data-open="info-1">Modal</a></p> <div class="modal-container"> <div class="modal" id="info-1"> <p>첫번째 모달 창 입니다.</p> </div> </div> <p><a class="modal-open" data-open="info-2">Modal</a></p> <div class="modal-container"> <div class="modal" id="info-2"> <p>두번째 모달 창 입니다.</p> </div> </div> <script type="text/javascript" src="modal.js"></script> </body> </html>
CSS
모달 배경 스타일
.modal-overlay {
background-color: #555;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: .3s ease;
visibility: hidden;
opacity: 0;
z-index: 1;
}
.modal-overlay.active {
visibility: visible;
opacity: 0.5;
}
사용된 코드 설명
position: fixed; top: 0; left: 0;
:
위쪽 맨 위 & 왼쪽 맨 끝부터 오버레이 보이게 위치 지정한다.
visibility: hidden; opacity: 0;
:
모달은 버튼을 눌러야 실행되는 것이므로 배경도 숨겨둬야한다. visibility: hidden;은 숨기는 거고 opacity: 0; 투명도를 0으로 지정해서 안 보이게 하는 거다. 둘 다 사용해서 레이아웃을 유지하자.
z-index: 1;
:
z-index가 진짜 제일 중요하다. 숫자가 높을수록 우선순위가 높다.
visibility: visible; opacity: 0.5;
:
.modal-overlay 클래스에 .active를 추가하여 활성화 됬을 때 흐릿하게 오버레이 되게 한다.
모달 가운데 정렬
.modal-container {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
z-index: 2;
}
사용된 코드 설명
display: flex; justify-content: center; align-items: center;
:
하위 요소를 가운데 정렬한다.
position: fixed; top: 0; left: 0;
:
위쪽 맨 위 & 왼쪽 맨 끝부터 오버레이 보이게 위치 지정한다.
width: 100%; height: 100%;
:
전체 화면의 가운데로 위치를 지정해야 하니 전체 화면으로 표시되게 한다.
visibility: hidden;
:
요소를 숨긴다. opacity를 넣으면 하위 항목인 modal이 보이지 않는다.
z-index: 2;
:
모달 오버레이보다 우선순위 높게 지정한다.
모달
.modal {
background-color: #FFF;
box-shadow: 0 0 10px #555;
min-width: 100px;
min-height: 100px;
max-height: calc(100% - 80px);
max-width: calc(100% - 80px);
overflow-y: auto;
transition: .3s ease;
position: fixed;
margin: auto; /* 중앙 정렬을 위한 margin */
visibility: hidden;
opacity: 0;
z-index: 3;
}
.modal.active {
visibility: visible;
opacity: 1;
}
[id^="info-"] {
padding: 20px;
}
[id^="image-"] img {
width: 100%!important;
height: auto;
}
사용된 코드 설명
background-color: #FFF;
:
배경 지정 안해주면 모달이 투명하게 보인다.
overflow-y: auto;
:
모달 안의 내용이 길어지면 세로로 스크롤이 생긴다.
position: fixed; margin: auto;
:
모달을 중앙에 배치한다.
visibility: hidden; opacity: 0;
:
모달은 버튼을 눌러야 실행되는 것이므로 배경도 숨겨둬야한다. visibility: hidden;은 숨기는 거고 opacity: 0; 투명도를 0으로 지정해서 안 보이게 하는 거다. 둘 다 사용해서 레이아웃을 유지하자.
z-index: 3;
:
모달 컨테이너보다 더 우선 순위 높게 지정한다.
visibility: visible; opacity: 1;
:
.modal 클래스에 .active를 추가하여 활성화 됬을 때 모달이 보이게 한다.
[id^=”info-“], [id^=”image-“]
:
id가 info-, image-로 시작하는 요소 선택자
✕(닫기) 버튼
.modal-close {
color: #FFF;
position: absolute;
top: 10px;
right: 10px;
display: block;
cursor: pointer;
width: 20px;
height: 20px;
padding: 5px;
line-height: 18px;
text-align: center;
}
.modal-close:before {
content: "✕";
z-index: 9999999;
}
사용된 코드 설명
position: absolute; top: 10px; right: 10px;
:
닫기 버튼의 위치를 맨 위부터 10px & 오른쪽부터 10px 떨어진 곳에 위치시킨다.
CSS 파일 만들기
위에서 정리한 코드를 추가하여 CSS로 모달은 숨겨놓고 개발자 모드에서 .modal, .modal-overlay에 .active 추가하여 잘 적용 되었는지 확인해보자.
modal.css 예시
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
.modal-open {
cursor: pointer;
text-decoration: underline solid #B2876F;
}
.modal-open:hover {
color: rgba(2,7,21,0.50);
}
.modal-overlay {
background-color: #555;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: .3s ease;
visibility: hidden;
opacity: 0;
z-index: 1;
}
.modal-overlay.active {
visibility: visible;
opacity: 0.5;
}
.modal-container {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
z-index: 2;
}
.modal {
background-color: #FFF;
box-shadow: 0 0 10px #555;
min-width: 100px;
min-height: 100px;
max-height: calc(100% - 80px);
max-width: calc(100% - 80px);
overflow-y: auto;
transition: .3s ease;
position: fixed;
margin: auto; /* 중앙 정렬을 위한 margin */
visibility: hidden;
opacity: 0;
z-index: 3;
}
.modal.active {
visibility: visible;
opacity: 1;
}
[id^="info-"] {
padding: 20px;
}
[id^="image-"] img {
width: 100%!important;
height: auto;
}
.modal-close {
color: #FFF;
position: absolute;
top: 10px;
right: 10px;
display: block;
cursor: pointer;
width: 20px;
height: 20px;
padding: 5px;
line-height: 18px;
text-align: center;
}
.modal-close:before {
content: "✕";
z-index: 9999999;
}
@media (prefers-color-scheme: dark)
{
.modal { background-color: #000; }
.modal-open:hover { color: rgba(255,249,249,0.50); }
}
jQuery
jQuery 시작
jQuery(document).ready(function() { ... });
사용된 코드 설명
jQuery(document).ready(function() {});
:
jQuery에서 문서의 DOM이 완전히 로드된 후에 특정 코드를 실행하기 위해 사용된다.
모달 열기
jQuery(".modal-open").on("click", function(event) {
event.preventDefault();
var targetModal = jQuery(this).data('open');
jQuery(".modal-overlay").addClass("active");
jQuery("#" + targetModal).addClass("active");
if (jQuery(this).find("img").length) {
var imgSrc = jQuery(this).find("img").attr("src");
jQuery("#" + targetModal).find(".modal-image").attr("src", imgSrc);
}
jQuery("html, body").css('overflow', 'hidden');
});
사용된 코드 설명
jQuery(“.modal-open”).on(“click”, function(event));
:
모달 열기
event.preventDefault();
:
모달을 여는 동안 원하지 않는 페이지 이동이나 새로 고침이 발생하지 않도록 한다.
var targetModal = jQuery(this).data(‘open’);
:
data-open 속성에서 모달 ID를 가져온다.
jQuery(“.modal-overlay”).addClass(“active”);
:
배경 오버레이에 .active를 추가하여 배경 오버레이가 보이게 한다.
jQuery(“#” + targetModal).addClass(“active”);
:
선택한 요소에 .active를 추가하여 모달이 보이게 한다.
if (jQuery(this).find(“img”).length) { }
:
클릭한 요소에 이미지가 있는지 확인 후 이미지가 존재할 때만 특정 작업(예: 이미지 설정)을 수행한다.
var imgSrc = jQuery(this).find(“img”).attr(“src”);
:
현재 클릭한 요소의 이미지 태그를 찾고 경로를 확인하여 imgSrc에 넣는다.
jQuery(“#” + targetModal).find(“.modal-image”).attr(“src”, imgSrc);
:
모달 ID를 참조하여 선택한 모달 내에서 .modal-image인 요소를 찾고 모달에서 보여줄 이미지를 찾는다.
jQuery(“html, body”).css(‘overflow’, ‘hidden’);
:
모달이 활성화되어있을 때 html, body 속성에 overflow: hidden을 추가하여 스크롤 못하게 스크롤바를 숨긴다.
닫기 버튼 작동
jQuery(".modal-close, .modal-overlay, .modal-image").on("click", function() {
jQuery(".modal-overlay, .modal").removeClass("active");
jQuery("html, body").css('overflow', 'auto');
});
사용된 코드 설명
jQuery(“.modal-close, .modal-overlay, .modal-image”).on(“click”, function() { }
:
닫기 버튼 클릭 / 배경 오버레이 클릭 / 이미지 모달 클릭시 기능을 지정한다.
jQuery(“.modal-overlay, .modal”).removeClass(“active”);
:
배경 오버레이, 모달에서 .active 제거하여 모달이 보이지 않게 한다.
jQuery(“html, body”).css(‘overflow’, ‘auto’);
:
html, body 속성에 overflow: auto를 추가하여 스크롤바를 다시 활성화한다.
jQuery 파일 만들기
위에서 정리한 코드를 추가하여 jQuery로 요소를 클릭하면 모달이 나오게 작동 시켜보자.
modal.js
jQuery(document).ready(function() {
jQuery(".modal-open").on("click", function(event) {
event.preventDefault();
var targetModal = jQuery(this).data('open');
jQuery(".modal-overlay").addClass("active");
jQuery("#" + targetModal).addClass("active");
if (jQuery(this).find("img").length) {
var imgSrc = jQuery(this).find("img").attr("src");
jQuery("#" + targetModal).find(".modal-image").attr("src", imgSrc);
}
jQuery("html, body").css('overflow', 'hidden');
});
jQuery(".modal-close, .modal-overlay, .modal-image").on("click", function() {
jQuery(".modal-overlay, .modal").removeClass("active");
jQuery("html, body").css('overflow', 'auto');
});
});
WordPress에 적용
- CSS, jQuery 추가하기
- modal.css, modal.js 파일을 추가할지 아니면 기존에 만들어 놓은 css 또는 js 파일에 추가로 넣을지 결정한다.
- modal.css, modal.js 파일을 추가한다면 Functions.php 파일에 wp_enqueue_style();, wp_enqueue_script(); 코드 사용하여 stylesheet와 script 파일을 추가한다.
- 기존에 만들어 놓은 css 또는 js 파일에 추가로 넣는다면 기존 코드 아래쪽에 넣고 구분하기 쉽게 주석으로 무슨 코드인지 추가한다.
- 포스트 만들 때 HTML 코드를 넣어서 모달을 표현한다.
- 숏코드를 만들어서 사용해도 된다.
- 포스트 작성할 때 편집기를 텍스트로 선택하여 위에 있는 HTML 코드를 사용여 넣어도 좋다.
참고
숏코드 제작 – 1편 - 숏코드 등록하기
숏코드 제작 - 2편 - 숏코드와 함께 내용을 입력하기
숏코드 제작 – 3편 - 숏코드 파라미터 등록하기
숏코드 제작 – 4편 - 숏코드 위젯에서 사용하기
특정 템플릿 CSS / JS 파일 추가 하기