버튼클릭시 레이어창 띄우는 팁입니다.
여러가지 방법이 있지만, 그중에 한방법입니다.
<script type="text/javascript">
var cc=0
function showHide(id) {
if (cc==0) {
cc=1
document.getElementById(id).style.display="block";
} else {
cc=0
document.getElementById(id).style.display="none";
}
}
</script>
클릭할 버튼을 아래와 같이 작성합니다.
layer 은 클릭시 보여질 id 명 (내용) 입니다.
버튼클릭시 보여질 내용은 아래와 같이 작성합니다.
<div id="layer">
보여질 내용입니다.
</div>
보여질 내용부분에는 ul 이 들어갈수도 있고, table 등이 들어갈수도 있겠군요.
마지막으로 스타일을 입혀주시면 됩니다. (외부/내부/인라인 상관없습니다.)
단, 스타일쪽에 display:none; 이 들어가야합니다.
#layer {display:none; width:200px; border:1px solid #ccc;}
대충 위처럼 꾸미고자 하는 스타일을 주시면 됩니다.
기본적으로 레이어창이 보이지 않고 버튼을 클릭할경우 보이기되며, 다시 한번 누르면 레이어창이 닫히게 됩니다. 만약 레이어창안에 닫기 버튼을 만들어서 클릭시 다시 닫히게 하고자 하면 위에 레이어창 띄우는 버튼과 동일하게 닫기 버튼을 만드시면 됩니다.
이런식이 되겠습니다.
미리보기는 http://web.webmini.net/ 에서 '통합검색' 부분과 '언어' 선택부분을 참고하시면 됩니다.
다른방법 : http://www.webmini.net/347