후아아아 진짜 오랜만에 포스팅ㅜㅜ
오늘은 레이어형 팝업창 띄우기!
우선 팝업을 띄우려면 창을 띄울 페이지가 필요하다
<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
</head>
<body>
<!-- contents -->
</body>
</html>
body안에 내용이 들어가는건 당연하니 패쓰..
이 컨텐츠 위에 레이어 형식으로 팝업창을 띄우려고 하는데,
이 또한 body 안에 div 영역을 지정하여 넣어주면 된다.
<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
</head>
<body>
<!-- contents -->
<div id="popup" class="main_pop">
<div id="contents" style="height: 360px;">
<a href="#"><img src="URL" border=0></a>
</div>
<div id="close" style="width:50px; margin:auto;">
close
</div>
</div>
</body>
</html>
div id=contents 인 영역안에 레이어팝업창 안의 내용이 들어가면 된다
이안에는 이미지나 텍스트 둘다 들어갈 수 있다.
보통은 위의 예시처럼 이미지가 들어가는 경우가 많겠지만..
그리고 이미지나 텍스트에 링크를 연결 할수도 있다.
예시의 경우 새창이 아닌 단순한 페이지의 이동링크.
새창을 띄우고 싶다면 단순한 a 태그를,
<a href="#" onclick="javascript:window.open('링크주소','링크내용','새창의 속성 ex.가로세로사이즈, 툴바나 주소창 스크롤바의 유무 등...'); return false;">
이런 형식으로 onclick 이벤트를 사용해 자바스크립트로 새창 열기를 해준다.
그런다음 창닫기를 실행시킬 jquery를 불러온다.
<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
<script src="http://code.jquery.com/jquery-latest.js"></script> <!-- 레이어 팝업에 필요한 jquery소스파일 -->
<script type="text/javascript">
$(document).ready(function() {
$('#close').click(function() { //close라는 영역을 클릭했을때,
$('#popup').hide(); //popup이라는 영역을 사라지게(혹은 숨겨지도록)
});
});
</script>
</head>
<body>
<!-- contents -->
<div id="popup" class="main_pop">
<div id="contents" style="height: 360px;">
<a href="#"><img src="URL" border=0></a>
</div>
<div id="close" style="width:50px; margin:auto;">
close
</div>
</div>
</body>
</html>
차암~~~~쉽죠잉?????
프로그래밍이나 코딩을 하다보니 디자인적인 요소들을 내가 작업 안해도 되니깐 뭔가 엄청 편하다ㅋㅋㅋㅋ...
그냥 난 받은 파일로 띄워주기만 하면 되...우왕ㅋ굳ㅋ
******************************* 추가사항! 2014.03.13*********************************
띄우는 방법만 써놓고.......스타일 부분을 빼먹었다는걸 이제서야 깨달았다.....(뭐이런멍충이가?!???!)
.main_pop {
width:270px; //영역의 가로값
height:370px; //영역의 세로값
background:#FF1B7A; //영역의 배경색
color:#FFF; //영역안의 텍스트색
position:absolute; top:200px; left:180px; //팝업창을 띄울 위치
text-align:center;
border:2px solid #FF1B7A;
}
position 값이 여기서는 제일 중요한 듯한데,
크롬에서 쓸수있는 픽셀자 (이름이 ruul 이였던듯) 프로그램으로 대강의 사이즈를 측정해서 원하는 위치값을 설정해주면 된다~!
'Programming > php' 카테고리의 다른 글
| [php] 오랜만에 php 관련함수들! 배열 & 파일업로드 관련~ (0) | 2014.04.03 |
|---|---|
| [php] 받아온 값 줄여서 보여주기(?) substr 한글깨짐 해결하기 (0) | 2014.02.14 |
| [PHP] dirname()함수와 $_SERVER 관련 상수들 (0) | 2014.01.09 |
| [PHP] MySql 데이터 끌어와서 리스팅&페이징 하기 (0) | 2014.01.08 |
| [PHP] 에러메시지-Client does not support authentication protocol requested by server; consider upgrading MySQL client (0) | 2014.01.07 |
