일반 팝업

일반 팝업 타입 1

function popup(url, w, h, name, option) {
    var pozX, pozY;
    var sw = screen.availWidth;
    var sh = screen.availHeight;
    var scroll = 0;
    if (option == 'scroll') {
        scroll = 1;
    }
    pozX = (sw - w) / 2;
    pozY = (sh - h) / 2;
    window.open(url, name, "location=0,status=0,scrollbars=" + scroll + ",resizable=1,width=" + w + ",height=" + h + 
    ",left=" + pozX + ",top=" + pozY);
}

See the Pen VvmJoM by jaeheekim (@jaehee) on CodePen.

일반 팝업 타입 2

function winPop(url, opts) {
   
   var popupName = opts.name || 'popup';
   var options = '';
   options += 'width=' + (opts.width ? opts.width : 200) + ', height=' + (opts.height ? opts.height : 200);
   options += opts.left && opts.width ? ', left=' + opts.left : ', left=' + ( (screen.availWidth - opts.width) / 2);
   options += opts.top && opts.height ? ', top=' + opts.top : ', top=' + ( (screen.availHeight - opts.height) / 2);
   options += opts.scrollbars ? ', scrollbars=' + opts.scrollbars : ', scrollbars=no';
   options += opts.resizable ? ', resizable=' + opts.resizable : ', resizable=no';
       console.log(popupName);
   window.open(url, popupName, options);
}

See the Pen WQoVem by jaeheekim (@jaehee) on CodePen.

Related links

1. 심플 애니 레이어팝업
2. 일반 팝업
3. Layer Pop-up (레이어 팝업)
4. Layer Pop-up(레이어 팝업) - 플러그인 타입 코드
5. Accessibility Layer Popup(접근성 레이어 팝업 코드)
6. Pure CSS : Layer-popup Auto center box

Jaehee's WebClub