使用“关闭”按钮打开自定义大小弹出窗口中的任何链接的最佳轻量级不显眼解决方案是什么？
编辑 3:
- 如果 JavaScript 被禁用，那么 链接应该在新标签/窗口中打开 就像任何普通页面一样。
- 弹出窗口应该在任何屏幕分辨率下垂直和水平居中打开(我注意到在双显示器设置上网络上的一些网站弹出窗口，弹出窗口在第二台显示器上打开)并且没有所有工具栏， 地址栏等
- 弹出窗口的高度应取决于 内容，不固定
我不想使用任何插件来获得这种效果只需要简单和更少的代码，只需要 jquery 库文件
像这样
alt text http://easycaptures.com/fs/uploaded/244/4705598517.jpg
编辑:我不是在问“模态窗口”和“灯箱”
编辑 2:
如果 js 被禁用，那么弹出窗口应该在新窗口中打开，链接的“标题”也应该更改
像这样:内容会出现在白色的地方。
<a href="http://stackoverflow.com" Title="Opens in a new pop-up" target="_blank">
进入这个
<a href="http://stackoverflow.com" Title="Opens in a new window" target="_blank">
即使禁用了 JS，是否可以使“关闭窗口”按钮工作。
最佳答案
第一步是禁用脚本时的回退，使用目标属性在新窗口或新选项卡中打开页面:
<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=... 值尝试获取屏幕分辨率并计算使弹出窗口居中的坐标。获取屏幕分辨率是特定于浏览器的，因此您只能在可用时应用它。
要在弹出窗口中获得关闭按钮，您需要一个可以在 iframe 中打开页面的代理页面。然后代码会变长一点，当然:
$(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();
});
});
关于javascript - 在自定义大小弹出窗口中打开任何链接的最佳轻量级不显眼解决方案是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2257276/