윈도우 팝업 / 레이어팝업

- 윈도우팝업

 var windowPop = window.open(url, windowName, [windowFeatures]); 

windowPop (반환값) : 반환값이 없으면 null리턴

url (주소) : 새창이 보여질 주소, 갑싱 비어있을경우 빈창 ex) pop1.html, pop2.do

windowName (팝업이름) : 팝업창의 이름, 동일한 팝업창이 열려있을 경우 해당팝업창의 내용이 초기상태로 바뀜

windowFeatures (팝업속성, 옵션) : 크기, 스크롤 등

     ex) width, height, left, top, scrollbars, resizable, location(주소창 표시여부)

 

 

.btn 클릭시 popup.html 윈도우 팝업 _ 크기 위치값 등 설정

$(".btn").click(function(e){
  e.preventDefault();
  window.open("popup.html","windowpopup","width=1060, height=880, left=20, top=50, scroollbars=0, menubar=0, toolbar=0")
});

 

 

 

 

- 레이어팝업 1

<a href="" class="gray" onclick="setLayer('.modal_set'); return false">	팝업오픈 버튼</a>



<div class="modal_layer_area center modal_set open">

  <div class="layer_box">
    <p class="modal_tit">
      <span class="txt">타이틀</span>
      <a href="" class="btn_layer_close" onclick="closeLayer(this); return false;">닫기버튼</a>
    </p>
    <div class="modal_cont">
    	<p>컨텐츠</p>
    	<p class="btn_cover">
    		<a href="" class="btn inblock">확인</a>
    	</p>
    </div>
  </div>
  
  <div class="layer_dim"></div>
  
</div>

 

.modal_layer_area {position: absolute; display: none; right: 59px; background-color: #ffffff; border: 1px solid #bcbcbc; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); visibility: hidden;}
.modal_layer_area.open {display: block; visibility: visible;}


.modal_layer_area.center {position: fixed; width: 100%; height: 100%; padding: 0; border: none; background-color: transparent; box-shadow: none; top: 0; left: 0; right: 0;  z-index: 3000;}
.modal_layer_area.center .layer_box {position: relative; overflow-y: auto; max-height: 100%; padding: 0; right: 5px; top: 50%; left: 50%; background-color: #fafafa; border: 1px solid #bcbcbc;  border-radius: 5px; transform: translate(-50%,-50%); z-index: 10;}
.modal_layer_area.center .layer_dim {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #000000; opacity: 0.5; z-index: 5;}

.modal_layer_area .modal_tit {height: 61px;}
.modal_layer_area .modal_tit .txt {float: left;}
.modal_layer_area .modal_tit .btn_layer_close {float: right; margin-top:-8px; margin-right:-5px; width: 29px; height: 29px; top: 0; right: 0;}

 

function setLayer(i) {
    var target = $(i);
    
    (target.hasClass('open')) ? target.removeClass('open') : target.addClass('open');
    if (i != '.key_create') {
        (target.hasClass('center')) ? $('html').css('overflow','hidden') : $('html').css('overflow','');
    }
}

function closeLayer() {
    var closeBtn = $('.btn_layer_close');

    closeBtn.click(function () {
        var target = $(this).parents('.modal_layer_area');
        (target.hasClass('open')) ? target.removeClass('open') : target.addClass('open');
        //if (!target.hasClass('key_create')) {
        //    (target.hasClass('center')) ? $('html').css('overflow','') : $('html').css('overflow','hidden');
        //}

        return false
    })
}

============================================================================================

 

- 레이어팝업 2 ( 여러개일 때)

<a href="#layer01" class="layerOpen">팝업오픈 버튼</a>
    <div id="layer01" class="modalLayer center">
        <div class="layerBox">
            <div class="modalHeader">
                <span class="tit">타이틀</span>
                <button class="layerClose">닫기버튼</a>
            </div>
            <div class="modalCont">
                <p>컨텐츠1111</p>
            </div>
            <div class="modalFooter">
                <p class="btnCover">
                    <a href="#" class="btn">확인</a>
                </p>
            </div>
        </div>        
        <div class="layerDim"></div>    
    </div>

    <a href="#layer02" class="layerOpen">팝업오픈 버튼</a>
    <div id="layer02" class="modalLayer center">
        <div class="layerBox">
            <div class="modalHeader">
                <span class="tit">타이틀</span>
                <a href="#" class="layerClose">닫기버튼</a>
            </div>
            <div class="modalCont">
                <p>컨텐츠22222</p>
            </div>
            <div class="modalFooter">
                <p class="btnCover">
                    <a href="#" class="btn">확인</a>
                </p>
            </div>
        </div>        
        <div class="layerDim"></div>    
    </div>

.modalLayer {
  position: absolute;
  display: none;
  visibility: hidden;
}
.modalLayer.is-active {
  display: block;
  visibility: visible;
}
.modalLayer.center {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
}
.modalLayer.center .layerBox {
  position: relative;
  overflow-y: auto;
  width: 50%;
  max-height: 100%;
  top: 50%;
  left: 50%;
  background: #fafafa;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.modalLayer.center .layerDim {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
}
.modalLayer .modalHeader .layerClose {
  background: red;
}
.modalLayer .modalCont {
  background: pink;
}
.modalLayer .modalFooter {
  background: blue;
}

var openBtn = document.querySelectorAll(".layerOpen");
var closeBtn = document.querySelectorAll(".layerClose");
var layerID;

for(var i=0; i<openBtn.length; i++){
    openBtn[i].addEventListener("click", function(){
        layerID = this.getAttribute('href');
        document.querySelector(layerID).classList.add('is-active');
    });
}
for(var j=0; j<openBtn.length; j++){
    closeBtn[j].addEventListener('click', function(){
        this.parentNode.parentNode.parentNode.classList.remove('is-active');
    });
}

참고) https://codepen.io/hyunjin-k/pen/dyVdmWd

popup script

 

============================================================

- 레이어팝업 2 ( 여러개일 때, button태그로 사용할때)

<button type="button" aria-controls="layer01" class="layerOpen">팝업오픈</button>

<div id="layer01" class="modalLayer center">팝업 컨텐츠</div>

.modalLayer{display: none;}
.modalLayer.is-active{display: block;}

function layerPop(){
    let openBtn = document.querySelectorAll(".layerOpen");
    let closeBtn = document.querySelectorAll(".layerClose");
    let layerID;
    if(openBtn !== null){
        for(let i=0; i<openBtn.length; i++){
            openBtn[i].addEventListener("click", function(){
                layerID = this.getAttribute("aria-controls");
                console.log(layerID);
                document.getElementById(layerID).classList.add('is-active');
            });
        }
        for(let j=0; j<closeBtn.length; j++){
            closeBtn[j].addEventListener('click', function(){
                this.parentNode.parentNode.parentNode.classList.remove('is-active');
            });
        }
    }else{
        return;
    }
}
layerPop();