출처 : http://swip.codylindley.com/popupWindowDemo.html

이게 좋은데, 입맛대로 사용하려고 하니 조금 수정을 필요로 했다.

몇 군데 수정하여 내 입맛에 맛도록 수정한 버전을 올린다.

(function ($) {

$.popupWindow = function (instanceSettings) {

$.popupWindow.defaultSettings = {

centerBrowser: 0, // center window over browser window? {1 (YES) or 0 (NO)}. overrides top and left

centerScreen: 0, // center window over entire screen? {1 (YES) or 0 (NO)}. overrides top and left

height: 500, // sets the height in pixels of the window.

left: 0, // left position when the window appears.

location: 0, // determines whether the address bar is displayed {1 (YES) or 0 (NO)}.

menubar: 0, // determines whether the menu bar is displayed {1 (YES) or 0 (NO)}.

resizable: 0, // whether the window can be resized {1 (YES) or 0 (NO)}. Can also be overloaded using resizable.

scrollbars: 0, // determines whether scrollbars appear on the window {1 (YES) or 0 (NO)}.

status: 0, // whether a status line appears at the bottom of the window {1 (YES) or 0 (NO)}.

width: 500, // sets the width in pixels of the window.

windowName: null, // name of window set from the name attribute of the element that invokes the click

windowURL: null, // url used for the popup

top: 0, // top position when the window appears.

toolbar: 0 // determines whether a toolbar (includes the forward and back buttons) is displayed {1 (YES) or 0 (NO)}.

};

settings = $.extend(true, {}, $.popupWindow.defaultSettings, instanceSettings || {});

var windowFeatures = 'height=' + settings.height +

',width=' + settings.width +

',toolbar=' + settings.toolbar +

',scrollbars=' + settings.scrollbars +

',status=' + settings.status +

',resizable=' + settings.resizable +

',location=' + settings.location +

',menuBar=' + settings.menubar;

settings.windowName = this.name || settings.windowName;

settings.windowURL = this.href || settings.windowURL;

var centeredY, centeredX;

if (settings.centerBrowser) {

if ($.browser.msie) {//hacked together for IE browsers

centeredY = (window.screenTop - 120) + ((((document.documentElement.clientHeight + 120) / 2) - (settings.height / 2)));

centeredX = window.screenLeft + ((((document.body.offsetWidth + 20) / 2) - (settings.width / 2)));

} else {

centeredY = window.screenY + (((window.outerHeight / 2) - (settings.height / 2)));

centeredX = window.screenX + (((window.outerWidth / 2) - (settings.width / 2)));

}

window.open(settings.windowURL, settings.windowName, windowFeatures + ',left=' + centeredX + ',top=' + centeredY).focus();

} else if (settings.centerScreen) {

centeredY = (screen.height - settings.height) / 2;

centeredX = (screen.width - settings.width) / 2;

window.open(settings.windowURL, settings.windowName, windowFeatures + ',left=' + centeredX + ',top=' + centeredY).focus();

} else {

window.open(settings.windowURL, settings.windowName, windowFeatures + ',left=' + settings.left + ',top=' + settings.top).focus();

}

return false;

};

})(jQuery);

여기는 사용 예,

그냥 url 인자값으로 넘긴다.

function PopupWindows( url) {

$.popupWindow({

windowURL: url,

windowName: 'dataPopup',

centerBrowser : 1

});

jquery.popupWindow.js

Open yahoo.com in a popup window (800x500) positioned 50 pixels from the top and left side of the screen.

<p><a href="http://www.yahoo.com" title="yahoo.com" class="example1demo">open popup</a></p>

$('.example1demo').popupWindow({

height: 500,

width: 800,

top: 50,

left: 50

});

</script>

Open a popup, centered over the top of the browser, using the same window. In order to have popup windows re-use the same window the element the invokes the popup needs to have the same name attribute value. In this example, I use the name "windowX" to identify that both links use the same window.

<p>

<a href="http://www.google.com" title="google.com" class="example2demo" name="windowX">open google.com</a>

| <a href="http://www.cnn.com" title="cnn.com" class="example2demo" name="windowX">open cnn.com, using the same window used to open google.com</a>

</p>

$('.example2demo').popupWindow({

centerBrowser: 1

});

</script>

Open a popup window, centered on the screen, not using the same window.

<p>

<a href="http://www.aol.com" class="example3demo">open aol.com</a> |

</p>

$('.example3demo').popupWindow({

centerScreen: 1

});

</script>

Open a popup by using an element other than an href to pass URL value.

<p><button class="example4demo">open window</button></p>

$('.example4demo').popupWindow({

windowURL: 'http://code.google.com/p/swip/',

windowName: 'swip'

});

</script>

(function ($) {

$.fn.popupWindow = function (instanceSettings) {

return this.each(function () {

$(this).click(function () {

$.fn.popupWindow.defaultSettings = {

centerBrowser: 0, // center window over browser window? {1 (YES) or 0 (NO)}. overrides top and left

centerScreen: 0, // center window over entire screen? {1 (YES) or 0 (NO)}. overrides top and left

height: 500, // sets the height in pixels of the window.

left: 0, // left position when the window appears.

location: 0, // determines whether the address bar is displayed {1 (YES) or 0 (NO)}.

menubar: 0, // determines whether the menu bar is displayed {1 (YES) or 0 (NO)}.

resizable: 0, // whether the window can be resized {1 (YES) or 0 (NO)}. Can also be overloaded using resizable.

scrollbars: 0, // determines whether scrollbars appear on the window {1 (YES) or 0 (NO)}.

status: 0, // whether a status line appears at the bottom of the window {1 (YES) or 0 (NO)}.

width: 500, // sets the width in pixels of the window.

windowName: null, // name of window set from the name attribute of the element that invokes the click

windowURL: null, // url used for the popup

top: 0, // top position when the window appears.

toolbar: 0 // determines whether a toolbar (includes the forward and back buttons) is displayed {1 (YES) or 0 (NO)}.

};

settings = $.extend({}, $.fn.popupWindow.defaultSettings, instanceSettings || {});

var windowFeatures = 'height=' + settings.height +

',width=' + settings.width +

',toolbar=' + settings.toolbar +

',scrollbars=' + settings.scrollbars +

',status=' + settings.status +

',resizable=' + settings.resizable +

',location=' + settings.location +

',menuBar=' + settings.menubar;

settings.windowName = this.name || settings.windowName;

settings.windowURL = this.href || settings.windowURL;

var centeredY, centeredX;

if (settings.centerBrowser) {

if ($.browser.msie) {//hacked together for IE browsers

centeredY = (window.screenTop - 120) + ((((document.documentElement.clientHeight + 120) / 2) - (settings.height / 2)));

centeredX = window.screenLeft + ((((document.body.offsetWidth + 20) / 2) - (settings.width / 2)));

} else {

centeredY = window.screenY + (((window.outerHeight / 2) - (settings.height / 2)));

centeredX = window.screenX + (((window.outerWidth / 2) - (settings.width / 2)));

}

window.open(settings.windowURL, settings.windowName, windowFeatures + ',left=' + centeredX + ',top=' + centeredY).focus();

} else if (settings.centerScreen) {

centeredY = (screen.height - settings.height) / 2;

centeredX = (screen.width - settings.width) / 2;

window.open(settings.windowURL, settings.windowName, windowFeatures + ',left=' + centeredX + ',top=' + centeredY).focus();

} else {

window.open(settings.windowURL, settings.windowName, windowFeatures + ',left=' + settings.left + ',top=' + settings.top).focus();

}

return false;

});

})(jQuery);

[jquery] 팝업 차단시에도 팝업 띄우기 popup