https://www.stagesafety.or.kr/public/common/popup/popup.js

1$(function(){
2    initPopup(document)
3});
4
5function initPopup(doc, win){
6    $(doc).on('click', '.common-popup>.popup-foot>button', function(){
7        const $curPopup = $(this).closest('.common-popup');
8        const data = $curPopup.data()
9        closePopup($curPopup, data);
10    }).on('change', '.common-popup>.popup-foot>label>input[type=checkbox]', function(){
11        const $curPopup = $(this).closest('.common-popup');
12        const data = $curPopup.data();
13        if($(this).is(':checked')) {
14            $.cookie("except_pop_id_"+data.popupid, "Y", {expires:1, path: '/'});
15            closePopup($curPopup, data)
16        }
17    });
18
19    function closePopup($popup, data) {
20        if(data.popupTypeCd === 'P') {
21            win.close();
22        } else {
23            if(data.popupTypeCd === 'M'){
24                $popup.prev('.common-popup-dim').delay(50).fadeOut(150)
25            }
26            $popup.fadeOut(150)
27        }
28    }
29}
30
31function fn_chooseCommonPopup(list){
32    const $body = $('body');
33	if(list.length){
34		for(const item of list){
35            const layerStr = `<div 
36                class="common-popup" style="width:${item.widthSize}px; height:${item.vrticlSize}px; ${item.popupTypeCd === "P" ? '' : `left:${item.leftPstn}px; top:${item.topPstn}px;`}"
37                    data-popupid="${item.popupntcid}"
38                    data-popup-type-cd="${item.popupTypeCd}"
39                >
40              <div class="popup-head">${item.ttl}</div>
41              <div class="popup-body">${item.cn}</div>
42              <div class="popup-foot">
43                  <label>
44                    <input type="checkbox">
45                    <span>오늘 그만 보기</span>
46                  </label>
47                  <button type="button"><span>닫기</span></button>
48              </div>
49            </div>
50            `
51			if($.cookie("except_pop_id_"+item.popupntcid) !== "Y") {
52				if(item.popupTypeCd === "P"){
53                    const popup = popupCenter({
54                        target: 'popup' + item.popupntcid
55                        , w: item.widthSize
56                        , h: item.vrticlSize
57                        , l: item.leftPstn
58                        , t: item.topPstn
59                    });
60
61                    if(!popup) {
62                        return;
63                    }
64
65                    popup.document.head.innerHTML = `
66                        <meta charset="utf-8">
67                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
68                        <title>${item.ttl}</title>
69                        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no" />
70                        <link rel="stylesheet" href="${contextpath}public/common/popup/popup.css">
71                    `;
72                    popup.document.body.className = 'window-popup';
73                    popup.document.body.innerHTML = layerStr;
74                    initPopup(popup.document, popup)
75				} else {
76                    const $popup = $(layerStr)
77                    if(item.popupTypeCd === 'M') {
78                        // dim
79                        const $dim = $("<div/>").addClass('common-popup-dim')
80                        $body.append($dim);
81                        $dim.fadeIn(200)
82                        $popup.delay(50)
83                    }
84                    $body.append($popup);
85                    $popup.fadeIn(200)
86
87                }
88			}
89	    }
90	}
91}
92
93const popupCenter = ({url, target, w, h, l, t}) => {
94	//open
95	// Fixes dual-screen position                             Most browsers      Firefox
96	const dualScreenLeft = window.screenLeft !==  undefined ? window.screenLeft : window.screenX;
97	const dualScreenTop = window.screenTop !==  undefined   ? window.screenTop  : window.screenY;
98
99	const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
100	const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
101

102	const systemZoom = width / window.screen.availWidth;
103	let top = '';
104	let left = '';
105	if (l === undefined) {
106		top = (height - h) / 2 / systemZoom + dualScreenTop;
107		left = (width - w) / 2 / systemZoom + dualScreenLeft;
108	} else {
109		top = t + dualScreenTop;
110		left = l + dualScreenLeft;
111	};
112	return window.open(url, target, `scrollbars=yes, width=${w}, height=${h}, left=${left}, top=${top}`);
113}