javascript 팁이 있는 곳입니다.
  • 웹미니 한줄 전광판 영역 입니다.
글 수 109
미리보기 :  

버튼클릭시 레이어창 띄우는 팁입니다.

여러가지 방법이 있지만, 그중에 한방법입니다.

 

 

<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>

 

클릭할 버튼을 아래와 같이 작성합니다.

 

 

<a href="#layer" onclick="showHide('layer');return false;"><img src="btn_ok.gif" alt="확인"></a>

 

layer 은 클릭시 보여질 id 명 (내용) 입니다.

 

버튼클릭시 보여질 내용은 아래와 같이 작성합니다.

 

<div id="layer">

보여질 내용입니다.

</div>

 

보여질 내용부분에는 ul 이 들어갈수도 있고, table 등이  들어갈수도 있겠군요.

 

마지막으로 스타일을 입혀주시면 됩니다. (외부/내부/인라인 상관없습니다.)

단, 스타일쪽에 display:none; 이 들어가야합니다.

 

#layer {display:none; width:200px; border:1px solid #ccc;}

 

대충 위처럼 꾸미고자 하는 스타일을 주시면 됩니다.

 

기본적으로 레이어창이 보이지 않고 버튼을 클릭할경우 보이기되며, 다시 한번 누르면 레이어창이 닫히게 됩니다. 만약 레이어창안에 닫기 버튼을 만들어서 클릭시 다시 닫히게 하고자 하면 위에 레이어창 띄우는 버튼과 동일하게 닫기 버튼을 만드시면 됩니다.

 

<a href="#layer" onclick="showHide('layer');return false;"><img src="btn_close.gif" alt="닫기"></a>

 

이런식이 되겠습니다.

 

미리보기는 http:/// 에서 '통합검색' 부분과 '언어' 선택부분을 참고하시면 됩니다.

 

 

다른방법 : http:///347

태그
profile 글쓴이 빽짱구

단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨

엮인글 :
https://web.webmini.net/javascript/43451/1ee/trackback
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

댓글 '4'

Habile (49080)

2009.07.05 09:15:58

 :) 좋은 정보감사해요 !! ㅎㅎ

로로스타 (116974)

2009.11.01 18:18:17

ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ

H1N1 (140705)

2009.12.21 01:35:46

백짱구님~소스 테스트한결과 크롬과 파폭에서는 정상적으로 출력이 되는데

IE6.0에서는 풀림현상이 일어나네요~그러니까 버튼을 클릭하지 않았는데도

레이어창이 열려져 있어요......수정부탁드릴게요 ^^

profile
title: [ani]깜빡이는 표정빽짱구 (485680)

2012.11.09 16:44:37

작성자

H1N1 (140705) 에 대한 댓글

스타일에 display:none; 이걸 추가해주셔야합니다.
List of Articles
번호 제목 글쓴이 날짜sort 추천 수 조회 수
89 오른쪽 마우스 클릭시 즐겨찾기 나오기 title: [ani]깜빡이는 표정빽짱구 2004-04-07 13 4975
88 속보용 알림장 [1] title: [ani]깜빡이는 표정빽짱구 2004-04-08 17 5064
87 best of best 출렁거리며 내려오는 공지창 title: [ani]깜빡이는 표정빽짱구 2004-04-19 20 5014
86 best of best 메트릭스 효과 문자 title: [ani]깜빡이는 표정빽짱구 2004-04-21 22 4921
85 상태표시줄 한글자씩 나타내기 title: [ani]깜빡이는 표정빽짱구 2004-04-21 10 5468
84 best of best 텍스트 타이핑효과 title: [ani]깜빡이는 표정빽짱구 2004-04-22 22 5989
83 선택복사하기 title: [ani]깜빡이는 표정빽짱구 2004-04-22 10 5857
82 타이틀바 꾸미기3 (옆으로 움직임) [1] title: [ani]깜빡이는 표정빽짱구 2004-04-22 13 5703
81 상태표시줄에 링크주소 감추기 title: [ani]깜빡이는 표정빽짱구 2004-04-30 16 7286
80 타이틀바 상태표시줄에 이름나타내기 title: [ani]깜빡이는 표정빽짱구 2004-05-04 11 6809
79 바탕화면에 주소 자동생성 title: [ani]깜빡이는 표정빽짱구 2004-05-04 11 7126
78 링크주소 가리기소스 title: [ani]깜빡이는 표정빽짱구 2004-07-21 18 7150
77 상태표시줄 링크주소 가리기 [1] title: [ani]깜빡이는 표정빽짱구 2004-08-06 13 7569
76 best of best 원클릭으로 클립보드에 저장하기 title: [ani]깜빡이는 표정빽짱구 2004-10-27 30 7497
75 best of best 위에서 아래로 떨어지는 메뉴 title: [ani]깜빡이는 표정빽짱구 2004-10-31 20 6107
74 best of best 클릭하면 메뉴가 나타나고, 다시 클릭하면 닫히는 소스 [1] title: [ani]깜빡이는 표정빽짱구 2004-10-31 33 5887
73 익스플로어 상태 표시줄에 스크립트 에러 경고 없애기 title: [ani]깜빡이는 표정빽짱구 2005-01-20 13 8137
72 하루동안 팝업창 띄우지 않기 title: [ani]깜빡이는 표정빽짱구 2005-02-23 8 9485
71 hit 팝업 띄우기 (SP2에서도) title: [ani]깜빡이는 표정빽짱구 2005-03-08 9 11288
70 best of best 통통 티는 탑버튼 만들기 title: [ani]깜빡이는 표정빽짱구 2005-03-19 23 6047