Jquery 버튼 클릭 시 레이어 팝업 - Jquery beoteun keullig si leieo pab-eob

아는 것이 좋은 것이다.

jQuery

[jQuery] jQuery 레이어 팝업, 마우스 위치에 창 띄우기

start0 2014. 6. 4. 10:35

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style type="text/css">
#divView {
position:absolute;
display:none;
background-color:#ffffff;
border:solid 2px #d0d0d0;
width:350px;
height:150px;
padding:10px;
}
</style>

<input type="button" class="imgSelect" serial="aa" idx="11" alt="버튼1" value="버튼1"/><!-- 임의로 serial, idx 삽입하여 스크립트로 값을 받게 할 수 있다. -->

<input type="button" class="imgSelect" serial="bb" idx="22" alt="버튼2" value="버튼2"/>

<input type="button" class="imgSelect" serial="cc" idx="33" alt="버튼3" value="버튼3"/>


<div id="divView"></div>

<script type="text/javascript">
//-- 버튼 클릭시 버튼을 클릭한 위치 근처에 레이어 생성 --//
$('.imgSelect').click(function(e) {
var divTop = e.clientY - 40; //상단 좌표 위치 안맞을시 e.pageY
var divLeft = e.clientX; //좌측 좌표 위치 안맞을시 e.pageX
var serial = $(this).attr("serial");
var idx = $(this).attr("idx");
$('#divView').empty().append('<div style="position:absolute;top:5px;right:5px"><span id="close" style="cursor:pointer;font-size:1.5em" title="닫기">X</span> </div><br><a href="?serial=' + serial + '">serial</a><BR><a href="?idx=' + idx + '">idx</a>');
$('#divView').css({
     "top": divTop
     ,"left": divLeft
     , "position": "absolute"
}).show();
$('#close').click(function(){document.getElementById('divView').style.display='none'});
});

</script>

- 클릭하면 팝업이 나타나는 소스 -

안녕하세요! 늑대털쓴양입니다.

오늘도 팝업에 관련된 제이쿼리 강좌인데요,

오늘은 페이지 접속 시 자동으로 뜨는 팝업이 아닌,

버튼을 클릭 시 팝업이 뜨게 하는 방법에 대해

알려드리겠습니다. 시작하겠습니다!

↑

클릭하고 보면 이해가 더 잘될지도

예제사이트 바로가기

왼쪽에 있는 '팝업띄우기' 라는 버튼을 클릭하면

오른쪽의 팝업이 나타나고 팝업에서 'close' 버튼을

클릭하면 팝업이 사라집니다.

<!DOCTYPE HTML>
<html>
<head>
<title>클릭하면 뜨는 팝업</title>

</head>

<body>

  <div id="pop_bt">
   팝업띄우기
  </div>

  <div id="pop" style="display:none;">
    <div style="height:370px;">
      안녕하세요 늑대털쓴양입니다.

</div>

  <div>
      <div id="close">close</div>
   </div>
</div>

</body>

</html>

1. 기본 html을 구성하고 'pop_bt'라는 아이디값을 가진 div와

'pop'이라는 아이디값을 가진 div를 넣어줍니다.

그리고 pop의 div안에 'close'라는 div를 넣어줍니다.

여기서 pop_bt는 클릭하면 팝업이 뜨게 할 버튼을 구성하는 div이고

pop은 클릭했을때 뜰 팝업을 구성하는 div 입니다.

close는 팝업을 닫을 때 사용할 div입니다.

팝업 구성에 대한 자세한 내용은 아래 링크에서 참고하세요.

레이어 팝업 강좌 바로가기

<!DOCTYPE HTML>
<html>
<head>
<title>클릭하면 뜨는 팝업</title>

   #pop{
  width:300px; height:400px; background:#3d3d3d; color:#fff;
    position:absolute; top:10px; left:500px; text-align:center;
    border:2px solid #000;
   }

   #pop_bt{
    border:1px solid #000;
    width:100px; margin:auto;
  margin-top:300px;
  cursor: pointer;
  font-weight:bold;
  text-align:center;
  padding:5px;
}

#close{
width:100px; margin:auto; cursor:pointer; font-weight:bold;
}

</style>

</head>

<body>

  <div id="pop_bt">
   팝업띄우기
  </div>

  <div id="pop" style="display:none;">
    <div style="height:370px;">
      안녕하세요 늑대털쓴양입니다.

</div>

  <div>
      <div id="close">close</div>
   </div>
</div>

</body>

</html>

2. head영역에 버튼과 팝업을 꾸밀 CSS를 추가해 주었습니다.

CSS강좌가 아니므로 자세한 설명은 생략하겠습니다.

<!DOCTYPE HTML>
<html>
<head>
<title>클릭하면 뜨는 팝업</title>

   #pop{
  width:300px; height:400px; background:#3d3d3d; color:#fff;
    position:absolute; top:10px; left:500px; text-align:center;
    border:2px solid #000;
   }

   #pop_bt{
    border:1px solid #000;
    width:100px; margin:auto;
  margin-top:300px;
  cursor: pointer;
  font-weight:bold;
  text-align:center;
  padding:5px;
}

#close{
width:100px; margin:auto; cursor:pointer; font-weight:bold;
}

</style>

</head>

<body>

  <div id="pop_bt">
   팝업띄우기
  </div>

  <div id="pop" style="display:none;">
    <div style="height:370px;">
      안녕하세요 늑대털쓴양입니다.

</div>

  <div>
      <div id="close">close</div>
   </div>
</div>

</body>

</html>

3. head영역에 위와같이 분홍색 부분의 소스를 넣어 제이쿼리 소스를 불러옵니다.

<!DOCTYPE HTML>
<html>
<head>
<title>클릭하면 뜨는 팝업</title>

   #pop{
  width:300px; height:400px; background:#3d3d3d; color:#fff;
    position:absolute; top:10px; left:500px; text-align:center;
    border:2px solid #000;
   }

   #pop_bt{
    border:1px solid #000;
    width:100px; margin:auto;
  margin-top:300px;
  cursor: pointer;
  font-weight:bold;
  text-align:center;
  padding:5px;
}

#close{
width:100px; margin:auto; cursor:pointer; font-weight:bold;
}

</style>

    $('#close').click(function() {
     $('#pop').hide();
    });
   });
</script>

</head>

<body>

  <div id="pop_bt">
   팝업띄우기
  </div>

  <div id="pop" style="display:none;">
    <div style="height:370px;">
      안녕하세요 늑대털쓴양입니다.

</div>

  <div>
      <div id="close">close</div>
   </div>
</div>

</body>

</html>

4. 이제 head영역에 버튼을 누르면 팝업이 뜨게 할 소스와

close버튼을 누르면 팝업이 닫히게 할 소스를 넣어줍니다.

소스 설명

↓

$(document).ready(function() {

    $('#pop_bt').click(function() {        // pop_bt 라는 id값을 가진 div를 클릭하면,
     $('#pop').show();                        // pop 이라는 id값을 가진 div가 나타난다.
    });

    $('#close').click(function() {         // close 라는 id값을 가진 div를 클릭하면,
     $('#pop').hide();                         // pop 이라는 id값을 가진 div가 사라진다.
    });

});

완성입니다!

예제사이트 바로가기

왼쪽에 있는 '팝업띄우기' 라는 버튼을 클릭하면

오른쪽의 팝업이 나타나고 팝업에서 'close' 버튼을

클릭하면 팝업이 사라집니다.

↑

도움이 되셨다면 클릭한번!