반응형
ி QNA
질문
티스토리 블로그 같은데 보면 ,
사진을 눌렀을 때 해당 이미지가 확대 되면서 주변 배경이 어두워짐으로
이미지를 부곽시키는 효과를 주는걸 응용하고 싶은데요.
| 설명1 | 설명2 |
| 설명3 | 설명4 |
위와같은 표가 있다고 했을 때 설명1을 누르면 해당 설명1에 대한 내용이
새로운 흰 박스에 담겨서 부곽되어 나오는거죠.
각 설명에 대한 내용은 div hidden style로 감춰지게 할겁니다.
예를들면 다음과 같이요. 표에 담긴 설명란을 클릭했을 때의 모습입니다.
위처럼 클릭한 해당 설명에 대한 내용이 흰 박스에 담겨서 출력되고
스크롤바로 더 내려서 볼 수 있게끔 하려고해요.
답변
modal popup 에 관련한 질문이네요 ^^
기본적인 html 과 css 는 할 줄 아신다는 가정하에, 아래의 소스를 참고하세요.
(클릭시 처리방식은 여러가지가 있지만, 해당 내용은 hashchange 방식을 사용하였습니다.)
컨텐츠에 lorem 을 넣었더니 글자수 제한으로 소스가 안들어가져서 P 엘리먼트 내의 내용은 그냥 줄였습니다.
○ 두 개의 모달 팝업 만들기
버튼을 클릭했을 때 양쪽으로 띄워지는 모달 팝업을 만들어본다.
해시체인지 사용 X
HTML
<input type="button" value="큰 화면으로 보기" onclick="full_scr()" style="color: #Eff; background:#50bcdf; font-size:2em; font-weight:bold;"><br /> <div id="myModal" class="modal"> <table><tr> <tr> <td class="md-content"> <div class="modal-content">abcd</div></td> <td class="md-content"> <div class="modal-content2">efgh</div></td> </tr></table> <div class="pop_but" onClick="close_pop();"> <span class="pop_bt" style="font-size: 26pt;" > 화면 닫기 </span> </div> </div>
CSS
/* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content/Box */ .modal-content { background-color: #fefefe; overflow: auto; margin: 20%; /* 15% from the top and centered */ padding: 20px; border-radius: 10px; border: 5px solid #0EF; width: 75%; height: 80%; } .modal-content2 { background-color: #fefefe; overflow: auto; margin: 5%; padding: 20px; border: 5px solid #0EF; border-radius: 10px; width: 75%; height: 80%; } .pop_but { cursor:pointer; text-align: center; padding-bottom: 10px; padding-top: 10px; width: 175px; right: 63px; background-color:blue; color:white; font-weight:bold; border-radius: 40px; position:relative; left:895px; bottom:75px; } .md-content { width:1200px; height:800px; border: 1px solid #666666; }
JS
function full_scr() { $('#myModal').show(); } function close_pop(flag) { $('#myModal').hide(); };
결과물
Modal Pop-Up
버튼이나 사진을 클릭 했을때 튀어나오는 나오는 화면을 일컫는다.
예를들어 티스토리 블로그 같은 곳에 사진을 클릭해보자.
화면 전환 없이 페이지를 넘어가지 않고 작은 크기를 가진 팝업 창이 화면 중앙에 뜨는것을 볼 수 있다.
hashchange
이 함수는 같은 페이지 안에서 해시(#)만 바뀌었을 때 동작한다.
반응형
'프로그래밍 > 웹' 카테고리의 다른 글
| 넘겨받은 POST값을 다른 PHP로 전달하기 (0) | 2019.11.29 |
|---|---|
| javascript 정규표현식 - 특수문자 제거 (0) | 2019.11.04 |
| 개발자도구 스크립트 모음 (0) | 2019.07.10 |
| 유튜브 API를 사용해서 음악 재생목록 만들기 (4) | 2019.07.05 |
| HTML 태그 - 속성 정리 (0) | 2019.07.05 |
