[javascript]레이어 팝업 생성함수

팝업을 사용하다보면 레이어 팝업이 꼭 필요한 시점이 있습니다 

 

간단하게 띄운 후 입력 받아 처리 해야 하는데 클라이언트들은 뒷 화면이 가려지거나 혹은 팝업이 표출 됐는데

메인 창 뒤로 사라져서 알지 못하고 불편하다고 이야기 하는 경우들이 종종 있어서 

이럴땐 레이어 팝업이 적합하다고 할 수 있습니다 

 

레이어 팝업을 페이지마다 추가 해놓고 숨김 및 보임 처리 하기에는 힘들기에 공통함수에 

레이어 팝업을 추가하여 사용하도록 하는것이 좋을것같습니다 

 

function addLayerPopup(title, url, height, width, param){

	let stIdx = url.lastIndexOf('/');
    let edIdx = url.indexOf('.');
    let popId = url.substring(stIdx+1, edIdx);
    
    let html = "";
    	html = "<div id ='"+popId+"_layer' class='ModalBasic MemberModal ui-draggable' style='position:static;' " + 
    		   "	<div style='height:100%; width:100%; background:#000; position: absolute; top:0px; left:0px; z-index:00000; opacity:0.4;'><div>" +
    		   "		<div style='height:"+height"+px; width:"+width+"px; margin0top:-"height/2+"px; margin-left:-"+width/2+"px; position:absolute:top:50%;left:50%;overflow:hidden:background:#fff;z-index:99999;'>" +
    		   "			<div class='infoHeader' style='border:0px solid #000; color:white; background-color:#b2dbf9;'" +
    		   "				<div class='ModalTitle' style='margin-top: 5px; font-size:1.8em; color:#3c67d0;'" +title+"</div>" +
    		   "				<div class='close' style='position:absolute; right:10px; <a href='javascript:;' onclick='layerClosePopup(\"" +popId+ "\");'> <i class='axi axi-ion-close-round'></i></a></div>" +
    		   "			</div>" +
    		   "		<div id='"+popId+"' style='padding:5px;'></div> " +
    		   "	</div>" +
    		   "</div>";

    $("body").append(html);

    var data = {};

    if(param)
    	data = param;

    $.ajax({
    	type: 'post',
    	url : url,
    	data: data,
    	dataType : "html",
    	success: function (data) {
    		$("#"+popId).children().remove();
    		$("#"+popId).html(data);
    	},
    	error: function (xhr, status, error){

    	},
    	compleate: function (){

    	}
    })

    $("#" + popId + "_layer").fadeIn(1000);




}JAVASCRIPT

이 함수로 레이어 팝업을 생성 및 삭제 가능합니다 

 

종료 함수는 popId를 받아서 .remove();

해주시면 됩니다 ㅎㅎ