반응형
일단 팝업 검색창을 띄울 레이어를 생성합니다.
간단하게 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>
출처 : https://www.hahwul.com/2015/12/coding-htmljavascript-code-for-popup.html
반응형
'Web > Js' 카테고리의 다른 글
JavaScript) 속성(attribute)값으로 태그(elements) 찾기 (0) | 2020.06.23 |
---|---|
(VueJs) string text to Html Convert / 일반 텍스트를 HTML 태그로 변환하기 (0) | 2020.06.05 |
Vuejs router.push Get/Post 화면 이동시 데이터 보내기 (0) | 2020.05.28 |
자바 스크립트의 세 번째 시대 (1) | 2020.05.28 |
[Web][VueJS] v-for과 key, 그리고 성능사이의 관계 (0) | 2020.05.27 |