[CODING] HTML/Javascript 를 이용한 팝업 레이어 만들기 :: Code for Popup Search Layer

블로그 디자인 수정 중 검색 부분에 재미있는 생각이 나서 약간 작업을 하였습니다.
기존에 쓰던 검색창은 블로그에서 바로 보이고 입력 후 검색하는 방법으로 구성하였는데, 클릭하여 따로 팝업을 띄운 후 거기서 검색하는 방법이 더 좋을 것 같다는 생각에 수정하였습니다.

일단 팝업 검색창을 띄울 레이어를 생성합니다.
간단하게 div 태그로 구역을 지정하고, style 을 설정하였습니다.


<div id="SearchLayer" style="position:absolute;z-index:999;display:none; width:100%; height:90%;
background: none rgba(0, 0, 0, 0.9);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#80000000', endColorstr='#80000000');
" align='center'>
<table valign="middle" height=100%><tr><td >
<input type='text'><input type='submit'><br>
...
<br><br>
<font size='3' color='white' onclick='CloseSearch()'>Close</font>
</td></tr></table>
</div>

블로그에 적용하기 전에 테스트 코드로 짜서 테스트하느라, 실제 적용된거랑은 약간 차이가 있겠지요.
여기서 처음 접속시에는 보이지 않게하기 위해서 display:none; 을 지정하였습니다.

그다음 매번 클릭 시 나타났다, 없어졌다를 반복하기 위해서 해당 div를 제어하는 js를 작성합니다.


<script type="text/javascript">
function ViewSearch(){
        document.getElementById("SearchLayer").style.display='inline'
    }
function CloseSearch(){
        document.getElementById("SearchLayer").style.display='none'
    }
</script>

getElementById로 div 의 id를 찾은 후 style로 노출 유무를 지정해주시면 됩니다.
마지막으로 방금 만든 ViewSearch() 함수와 CloseSearch() 함수를 실행하는 부분을 작성해주시면 됩니다.
테스트할때는 그냥 a 태그로 했었고, 실제 적용에는 메뉴바에서 해당 함수를 호출하도록 해놨습니다.


<a href="javascript:ViewSearch();">HAHWUL_TEST</a>

실제 이런식으로 적용이 되었지요.

테스트 진행하며 만들었던 html 전체 코드입니다.


<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function ViewSearch(){
        document.getElementById("SearchLayer").style.display='inline'
    }
function CloseSearch(){
        document.getElementById("SearchLayer").style.display='none'
    }
</script>

<div id="SearchLayer" style="position:absolute;z-index:999;display:none; width:100%; height:90%;
background: none rgba(0, 0, 0, 0.9);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#80000000', endColorstr='#80000000');
" align='center'>
<table valign="middle" height=100%><tr><td >
<input type='text'><input type='submit'><br>
...
<br><br>
<font size='3' color='white' onclick='CloseSearch()'>Close</font>
</td></tr></table>
</div>
<a href="javascript:ViewSearch();">HAHWUL_TEST</a>
</body>
</html>

HAHWUL

Security engineer, Gopher and H4cker!

Share: | Coffee Me:

12/12/2015

[CODING] HTML/Javascript 를 이용한 팝업 레이어 만들기 :: Code for Popup Search Layer

HAHWUL

7 comments: