출처 : 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.jsOpen 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>
<script type="text/javascript">
$('.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>
<script type="text/javascript">
$('.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> |
<a href="http://www.msn.com" class="example3demo">open msn.com</a>
</p>
<script type="text/javascript">
$('.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>
<script type="text/javascript">
$('.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);
