3_팝업 창 패턴 1)일반 팝업 창.

3-1_일반 팝업 창.zip

0.26MB

 

일반 팝업 창 패턴입니다.

 

HTML

<div class="popup"> - <div class="heading">

                            -  <div class="contents">

                            -  <div class="close">

의 구조를 갖습니다.

 

css

.popup은 가운데 정렬 코드를 작성해야 합니다.화면 가운데 내에 정렬하려면 position:absolute;나, fixed를 사용하시면 됩니다. 그러나 개인적으로는 화면 자체에서 고정되 변화하지 않는 fixed 쪽이 더 안정된 결과가 나오지 않나 생각합니다.

 

포지션 absolute/fixed 속성값이 있는 상태에서 top:50%; left:50%; transform:translate(-50%,-50%)을 작성하면 가운데 정렬을 해 줄 수 있습니다.

 

트랜스폼 속성은 margin-top:-height값/2 , margin-left:-width값/2 으로 대체할 수 있습니다.

(만약 width:600px; height;400px;이라면 margin-top:-200px; margin-left:-300px;이란 소리.)

 

또한 반드시 배경 색이 지정되어야 합니다. 안 그러면 안에 있는 글씨만 떠다니는 효과가 됩니다.

 

javascript

나중에 작성될 공지사항의 표 영역의 첫 줄을 클릭해야 합니다. 

$('table tr:first-child')로 이벤트 대상을 지칭하고, .click()이벤트를 지정합시다. 

연습 삼아 하실 거라면 다른 이벤트 대상을 지칭해도 괜찮습니다.

그리고 $('.popup') 대상에 .show()효과를 연결합시다.

 

그리고 .close를 클릭했을 때, 없어지도록 $('.close')에 클릭 이벤트를 지정하고

.popup이 사라지도록 hide()메소드를 연결합시다.