J-한솔넷

레이어로 표현하는 팝업 본문

웹 개발관련

레이어로 표현하는 팝업

jhansol 2013. 1. 24. 11:21

요즘은 팝업창을 띄워 공지사항을 표시하는 경우가 많이 준 것 같습니다.

그 원인으로는 대부분의 웹브라우즈가 기본적으로 팝업창을 차단하도록 설정되어 있기 때문입니다.


그래서 팝업창 보다 레이어를 이용하여 페이지에 공지사항을 표시하는 경향이 늘고 있습니다.

아래의 예는 하이퍼링크를 클릭했을 때 레이어를 표시하고 닫기 단추를 클릭하여 닫는 방법과 마우스를 어떤 특정 부위에 올렸을 때 레이어가 나타나고 벗어나면 레이어가 숨겨지는 경우 두 가지를 한 소스에 나타 내었습니다.


그리고 이 소스는 JQuery를 이용하였습니다.


<!doctype html>

<html>

 <head>

  <title> new document </title>

  <meta name="generator" content="editplus">

  <meta name="author" content="">

  <meta name="keywords" content="">

  <meta name="description" content="">

  <script src="jquery-1.8.3.min.js"></script>

  <style>

#img {

position: absolute;

left: 200px;

top: 30px;

width: 400px;

height: 400px;

background-color: green;

z-index: 1;

display: none;

}

 </style>

 <script>

function on_show( id ) {

$( id ).show();

}


function on_hide( id ) {

$( id ).hide();

}

 </script>

 </head>


 <body>

<!-- 링크를 클릭한 경우 팝업 레이어 표시 -->

<a href="javascript:on_show( '#img' )">확대보기</a><br/>


<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


<!-- 내용에 마우스 포인트가 이동하면 팝업 레이어를 표시하고 벗어나면 팝업 레이어 숨김 -->

<span onmouseover="on_show( '#img' )" onmouseout="javascript:on_hide( '#img' )">여기로 마우스 포인트를 옮겨보고 다시 다른 쪽으로 옮겨 보세요</span>


<!-- 팝업 레이어 시작 -->

<div id="img">

이미지 등 내용을 입력합니다.<br/><br/><br/><br/><br/><br/>

<a href="javascript:on_hide( '#img' )">닫기</a>

</div>

<!-- 팝업 레이어 끝 -->

 </body>

</html>




저작자표시

'웹 개발관련' 카테고리의 다른 글

그누보드의 게시판 스킨 변경하기  (1) 2013.01.28
그누보드의 로그인화면에서 내가 만든 상단 하단 내용 표시하기 #1  (0) 2013.01.28
JSON 객체의 간단한 활용 예제  (0) 2013.01.18
JSON 개요  (0) 2013.01.18
tab 안에 또다른 텝 표시  (0) 2013.01.18
'웹 개발관련' Related Articles more