Первый шаг - это запасной вариант, когда скрипт отключен, используя атрибут target, чтобы открыть страницу в новом окне или новой вкладке:
<a href="page.html" target="_blank">page</a>
Затем вы можете добавить скрипт для обработки события клика:
<a href="page.html" target="_blank" onclick="window.open(this.href,this.target,'width=200,height=300');return false;">page</a>
Вместо этого вы можете использовать jQuery, чтобы применить событие к нужным ссылкам, например, применить его ко всем ссылкам с помощью class="popup":
$(function(){
$('a.popup').click(function(e){
window.open(this.href,this.target,'width=200,height=300');
e.preventDefault();
});
});
Вы можете добавить дополнительные значения в строку объектов, например, location=0,menubar=0,status=0,toolbar=0, чтобы попытаться удалить панели инструментов и тому подобное из окна. Однако поддержка этого зависит от браузера, и местоположение, как правило, скрыть невозможно.
Вы также можете попытаться получить разрешение экрана и рассчитать координаты для центрирования всплывающего окна, используя значения top=...,left=.... Получение разрешения экрана зависит от браузера, поэтому вы можете применять его, только если оно доступно.
Чтобы получить кнопку закрытия во всплывающем окне, вам нужна прокси-страница, которая может открыть страницу в фрейме. Тогда код становится немного длиннее, конечно:
$(function(){
$('a.popup').click(function(e){
var w = window.open('',this.target,'width=200,height=300')
w.document.open();
w.document.write(
'<html>'+
'<head>'+
'<style>'+
'iframe { border: none; height: 250px; }'+
'a { float: right; padding: 10px; }'+
'</style>'+
'</head>'+
'<body>'+
'<iframe src="'+this.href+'"></iframe>'+
'<a href="javascript:window.close();">Close</a>'+
'</body>'
);
w.document.close();
e.preventDefault();
});
});