[html] 팝업창 띄우기 2

웹이앱을만났을때 | 2014.04.14 14:49 | 조회 19652
http://blog.naver.com/PostView.nhn?blogId=hyoyeol&logNo=70174295165


 

 

 

 

예제사이트 바로가기

 

페이지를 열자마자 레이어팝업이 뜨고,

아래쪽 close버튼을 누르면 팝업이 사라집니다.

 

 

 

 

 

 

 

 

 

<div id="pop">

 

</div>

 

 

 

 

1. 팝업을 넣을 페이지 body안의 가장 아래쪽에 pop이란 id값을 가진 div를 추가합니다.

 

 

 

 

 

 

 

 

 

 

<style type="text/css">
 #pop{
  width:300px; height:400px; background:#3d3d3d; color:#fff; 
  position:absolute; top:10px; left:100px; text-align:center; 
  border:2px solid #000;
   }

</style>

 

 

 

 

2. <head>와 </head>사이에 위와같이 CSS 코드를 추가해줍니다.

 

width는 팝업창의 가로크기, height는 세로크기, background는 팝업 배경색상,

color는 팝업에 들어갈 글자 색상, top은 인터넷창 위에서 얼만큼 떨어진 위치에 둘지,

left는 왼쪽에서 얼만큼 떨어진 위치에 둘지, text-align:center는 글자 가운데 정렬

border:2px solid #000은 팝업 테두리 두께와 색상을 지정해준다.

 

 

 

 

 

 

 

 

 

 

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

    <a href=""><b>팝업강좌 바로가기</b></a>
  </div>

</div>

 

 

 

 

3. 팝업의 내용이 들어갈 div 묶음을 추가하고 간략하게 내용을 넣어주었습니다.

height를 370px인 이유는 전체 400px에서 30px은 닫기버튼을 넣어주기 위함입니다.

 

팝업 내용이 텍스트가 아닌 이미지라면 <img src="경로">로 넣어주면 됩니다.

 

 

 

 

 

 

 

 

 

 

 

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

     <a href=""><b>팝업강좌 바로가기</b></a>
  </div>

  <div>
    <div id="close" style="width:100px; margin:auto;">close</div>
  </div>
</div>

 

 

 

 

4. 닫기버튼으로 쓸 div를 추가하고 close라고 적어주었습니다.

 

width값은 글자 길이나 이미지 길이에 따라 다르게 지정해주어야 하며

margin:auto는 버튼을 가운데 정렬하는건데 필요없으면 빼도 됩니다.

 

여기까지 잘 따라하셨다면 사이트를 열어보면 레이어팝업창이 뜰겁니다.

하지만 자바스크립트 소스를 넣지 않았기 때문에 닫히지가 않겠죠.

 

이제 자바스크립트 소스를 입혀봅시다!

 

 

 

 

 

 

 

 

 

 

 

 

5. <head>와 </head>사이에 위와같이 넣어주어 제이쿼리 사용시 필요한 js를 로드합니다.

 

 

 

 

 

 

 

 

 

 

 <script type="text/javascript">
    $(document).ready(function() {
      $('#close').click(function() {
        $('#pop').hide();
      });
    });
 </script>

 

 

 

 

6. <head>와 </head>사이에 위와같이 레이어 팝업을 닫아줄 스크립트 소스를 넣어줍니다.

 

 $('#close').click(function()  :  close라는 id를 가진 div를 클릭 시

$('#pop').hide();  :  pop라는 id를 가진 div는 사라진다 

 

 

 

 

 

 

 

 

예제사이트 바로가기

 

완성입니다.

 

레이어 팝업은 팝업 차단과 관계없이 뜨고 오류도 거의 없으며

뜨는 속도도 빠르기 때문에 많은 업체에서 사용되고 있는 소스입니다.

 

여러분들도 잘 응용해서 사용해보시기 바랍니다^^

 

facebook twitter
29개(1/2페이지)
소스
번호 제목 글쓴이 조회 날짜
29 [css] 자간 줄이는 소스 웹이앱을만났을때 7562 2016.11.17 16:48
28 [모바일웹] usemap 모바일웹에서 제대로 작동되게하는 소스 웹이앱을만났을때 7083 2016.11.17 03:23
27 마우스 오버시 배경처리 jquery js 웹이앱을만났을때 11750 2015.06.21 21:55
26 [html/javascript] 화면 맨위로 올리는 자바스크립트 웹이앱을만났을때 12799 2015.01.01 12:12
25 [html] checkbox 전체 선택기능 웹이앱을만났을때 13849 2014.05.02 16:09
24 [php,html] 체크박스별 삭제 기능 웹이앱을만났을때 17101 2014.05.02 15:49
23 [html] input type = file 초기화(reset)시키는 법 웹이앱을만났을때 14296 2014.04.25 23:30
22 이미지 위에 이미지 사진 웹이앱을만났을때 12811 2014.04.14 22:03
>> [html] 팝업창 띄우기 2 사진 웹이앱을만났을때 19653 2014.04.14 14:49
20 [html] 팝업창 띄우기 웹이앱을만났을때 17529 2014.04.10 14:32
19 [안드로이드] 두번 백버튼 누를시 종료되게 하는 소스 웹이앱을만났을때 15706 2014.04.10 06:52
18 [웹] 위지윅 에디터 총집합 웹이앱을만났을때 16469 2014.03.25 16:54
17 삼성앱스 패키지명으로 검색하는 방법 웹이앱을만났을때 13587 2014.03.20 11:20
16 [cent os] php.conf 및 httpd.conf ifcfg-et 첨부파일 웹이앱을만났을때 13817 2013.12.05 10:54
15 삼성앱스 연결(바로가기) url(링크) 소스 웹이앱을만났을때 15725 2013.09.25 10:54
14 [모바일웹]주소창 없애는 소스 웹이앱을만났을때 16021 2013.05.07 21:41
13 mms 수신 메니페스트 구현부 웹이앱을만났을때 17837 2012.09.05 15:11
12 네이티브 크로스 플랫폼인 citirne으로 개발한 쇼핑몰 app 소스 공 씨트린 16996 2012.08.01 10:41
11 [티스토어]부분유료 샘플소스 첨부파일 웹이앱을만났을때 16810 2012.05.29 16:07
10 [안드로이드] 인텐트 종류 웹이앱을만났을때 15323 2012.05.29 11:38