[Javascript]버튼클릭시 레이어창 띄우기

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

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

 

 

<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://web.webmini.net/ 에서 '통합검색' 부분과 '언어' 선택부분을 참고하시면 됩니다.

 

 

다른방법 : http://www.webmini.net/347

[Javascript]마우스 오버시 레이어창 뜨기(파폭,익스지원)

마우스 오버시 레이어창 띄우는 팁입니다.

 

 

<script type="text/javascript">
function view(opt) {
  if(opt) {
     spec1.style.display = "block";
  }
  else {
     spec1.style.display = "none";
  }
}
</script>

<a href="#" onmouseover="view(true)" onmouseout="view(false)" style="text-decoration:none; ">가나다라마바사</a>

 

오버시 보여질 내용입니다.

<div id="spec1" style="position:relative;display:none;">
마우스 오버해보세요.
</div>

 

여러가지로 응용해보세요.

[Javascript]버튼클릭시 레이어창 띄우기

버튼을 클릭시 새로운 레이어창을 띄우는 소스입니다.

<script type="text/javascript">
function ViewLayer(){
        document.getElementById("Pop_c").style.display='inline'
    }
</script>

<!-- 버튼 -->
<a href="javascript:ViewLayer();"><img src="버튼이미지주소" alt=""></a>

<!-- 클릭시 보여질 레이어 -->
<div id="Pop_c" style="position:absolute; left:0; top:704px; z-index:1;display:none; width:950px; height:207px;">
보여질 내용
</div>

스타일은 사이트에 맞게 수정하시면 됩니다.

 

다른방법 : http://www.webmini.net/418

[플래쉬]플래쉬 아래로 레이어가뜰때 해결방법

<object> 태그 사용시는

 

<param name="wmode" value="transparent">

 

추가해 줍니다.

<embed> 태그만 사용시는 <embed> 태그에

 

wmode="transparent"

 

추가해 주면 됩니다.  

 

투명하게 할때도 사용됩니다.