| | at : |


Archive

[CODING] HTML/Javascript 를 이용한 팝업 레이어 만들기 :: Code for Popup Search Layer 하훌 rwxr-xr-x 0 12/12/2015



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

Permission rw-r--r--
Author 하훌
Date and Time 12/12/2015
Label
License 크리에이티브 커먼즈 라이선스


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

일단 팝업 검색창을 띄울 레이어를 생성합니다.
간단하게 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 tyep='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 tyep='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>



Share







HAHWUL
HACKING | PENETRATION-TEST | CODING
HACKERONE : GIT : 0DAY-TODAY : EXPLOIT-DB : PACKETSTORM
GOOGLE+ | HAHWUL@GMAIL.COM | TWITTER
WWW.HAHWUL.COM






Recent Post

0 개의 댓글:

댓글 쓰기