[Jquery] 현재 위치에서 팝업창 가운데로 띄우기(뒷배경 불투명)

작성자
qjadud22 · JQUERY
2017. 9. 27. 19:11



스크롤 바를 내린 상태에서 팝업 창을 띄우면 상단에 팝업창이 생기는 문제가 발생할 수 있다. 

"top": (($(window).height()-$("#popupDiv").outerHeight())/2+$(window).scrollTop())+"px"
"left": (($(window).width()-$("#popupDiv").outerWidth())/2+$(window).scrollLeft())+"px"


위 공식을 사용하면 현재 위치에서 가운데에 팝업창을 띄울 수 있다. 

  $("body").css("overflow","hidden");//body 스크롤바 없애기
  $("body").css("overflow","auto");//body 스크롤바 생성

body의 overflow를 건드는 이유는 팝업창을 띄운 고정된 상태에서 스크롤바의 움직임을 제한하기 위해서다 .

자세한 설명은 주석 참고 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
    <title>Home</title>
    
    <style>
    
    
    #popupDiv {  /* 팝업창 css */
    top : 0px;
    position: absolute;
    background: blue;
    width: 500px;
    height: 500px;
    display: none; 
    }
    
    #popup_mask { /* 팝업 배경 css */
        position: fixed;
        width: 100%;
        height: 1000px;
        top: 0px;
        left: 0px;
         display: none; 
         background-color:#000;
         opacity: 0.8;
    }
    
    </style>
</head>
<body>
    
    <button id="popOpenBtn">Popup Open</button> 
 
    <div id ="popup_mask" ></div> <!-- 팝업 배경 DIV -->
    
    <div id="popupDiv"> <!-- 팝업창 -->
        <button id="popCloseBtn">close</button>
    </div>
        
    </div>
    
    <script>
    
    $(document).ready(function(){
        
        $("#popOpenBtn").click(function(event){  //팝업 Open 버튼 클릭 시 
 
             $("#popupDiv").css({
                "top": (($(window).height()-$("#popupDiv").outerHeight())/2+$(window).scrollTop())+"px",
                "left": (($(window).width()-$("#popupDiv").outerWidth())/2+$(window).scrollLeft())+"px"
                //팝업창을 가운데로 띄우기 위해 현재 화면의 가운데 값과 스크롤 값을 계산하여 팝업창 CSS 설정
             
             }); 
            
            $("#popup_mask").css("display","block"); //팝업 뒷배경 display block
            $("#popupDiv").css("display","block"); //팝업창 display block
            
            $("body").css("overflow","hidden");//body 스크롤바 없애기
        });
        
        $("#popCloseBtn").click(function(event){
            $("#popup_mask").css("display","none"); //팝업창 뒷배경 display none
            $("#popupDiv").css("display","none"); //팝업창 display none
            $("body").css("overflow","auto");//body 스크롤바 생성
        });
     
    
    });
 
 
    </script>
</body>
</html>
 
Colored by Color Scripter
cs


'JQUERY' 카테고리의 다른 글

[jquery] 동적으로 생성된 태그 이벤트 처리  (1) 2017.09.24

Tags

Read Next

Comment

티스토리툴바