https://inpeople.co.kr/js/layer_popup.js

1/* *******************************************************
2 * filename : layer_popup.js
3 * description : 모달레이어를 띄울때 사용되는 ajax JS
4 * date : 2022-03-14
5******************************************************** */
6
7
8// Modal Open
9$(document).on("click",".cm-modal-open-btn",function  () {
10	if ( $(".modal-fixed-pop-wrapper").length > 0 ) {
11		ajaxLoad($(this).attr("href"));
12		$(".modal-fixed-pop-wrapper:last-child").css("background-color","transparent");
13	}else {
14		ajaxLoad($(this).attr("href"));
15	}
16	return false;
17});
18
19 /* ************************
20  * Modal 영역 생성
21  ************************ */
22function addModalLayer () {
23	var modalHtml = '';
24    modalHtml += '<article class="modal-fixed-pop-wrapper">';
25    modalHtml += '<div class="modal-loading"><span class="loading"></span></div>';
26    modalHtml += '<div class="modal-fixed-pop-inner">';
27    modalHtml += '<div class="modal-inner-box">';
28    modalHtml += '<div class="modal-inner-content">';
29    modalHtml += '</div>';
30    modalHtml += '</div>';
31    modalHtml += '</div>';
32    modalHtml += '</div>';
33    modalHtml += '</article>';
34
35    $('body').append(modalHtml);
36}
37
38 /* ************************
39  * Ajax Load
40  * @param strUrl : 모달레이어팝업 주소
41  ************************ */
42// Ajax Load
43function ajaxLoad(strUrl){
44	addModalLayer();
45	var $modalWrap = $(".modal-fixed-pop-wrapper:last-child");
46	$modalWrap.fadeIn();
47	htmlScrollControl (true);
48	$.ajax({
49		type: "POST",
50		url: strUrl,
51		data: "",
52		success: function(resultText){
53			$modalWrap.find(".modal-inner-content").html(resultText).find(".modal-close-btn").focus();
54			$(document).keydown(function(event) {
55				if ( event.keyCode == 27 || event.which == 27 ) {
56					if ( $modalWrap.css("display") == "block" ) {
57						ajaxUnLoad();
58					}
59				}
60			});
61		},
62		error: function() {
63			if ( $("html").attr("lang") == "ko" ) {
64				alert("호출에 실패하였습니다.");
65			}else {
66				alert("Please try again.");
67			}
68
69			$(".modal-fixed-pop-wrapper").hide();
70			htmlScrollControl (false);
71		},
72		beforeSend:function(){ 
73			$('.modal-loading').show(); 
74		},
75		complete:function(){ 
76			$('.modal-loading').hide();
77		}
78	});
79}
80// 변경전 함수명(오류를 막기위해 사용)
81function layerLoad (strUrl) {
82	ajaxLoad(strUrl);
83}
84
85 /* ************************
86  * Ajax UnLoad
87  * Modal Layer Popup Close
88  * 닫기버튼, 취소버튼 등에 onclick="ajaxUnLoad();"
89  ************************ */
90function ajaxUnLoad () {
91	if ( $(".modal-fixed-pop-wrapper").length > 1 ) {
92		$(".modal-fixed-pop-wrapper:last-child").fadeOut(10, function  () {
93			$(this).remove();
94		});
95	}else {
96		htmlScrollControl (false);
97		$(".modal-fixed-pop-wrapper").fadeOut(10, function  () {
98			$(this).remove();
99		});
100	}
101}