Question

使用“关闭”按钮在自定义大小弹出窗口中打开任何链接的最佳轻量级不显眼解决方案是什么？

编辑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被禁用，也可以使“关闭窗口”按钮工作。

Answer 1

我认为这不是一个好主意，但适合自己。

哦，你不能中心窗口，这是特定于操作系统的。

修改：当Pekka唤醒我时，你可以设置你的位置，所以改进（未经测试）的解决方案：
编辑2 ：编辑为被问者，并且，bobince指出 - $this不存在

<a id="close" href="your-link" target="_blank" title="opens in a new window">close</a>

和

$(document).ready(function(){
    $("#close").attr('title','opens in a new pop-up'); //set new title

    $("#close").click(function(){ //click action
        w = parseInt((screen.width - 600)/2); h = parseInt((screen.height - 400)/2);
        cwin = window.open($(this).attr('href'), 'closewin',
       'status=0,toolbar=0,location=0,menubar=0,directories=0,resizable=0,scrollbars=0,height=400,width=600');
        cwin.moveTo(w,h);
        return false;
    });
});

不幸的是，我不知道如何根据内容设置高度，这需要更多的计算。

Answer 2

第一步是禁用脚本时的后备，使用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=...值来获取屏幕分辨率并计算坐标以使弹出窗口居中。获取屏幕分辨率是特定于浏览器的，因此只有在可用时才应用它。

要在弹出窗口中获得关闭按钮，您需要一个可以在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();
  });
});

Answer 3

您是否正在寻找符合JQuery UI Dialog的内容？

演示here。

我不推荐“真正的”弹出窗口（即单独的浏览器窗口），因为它们越来越被阻止，并且无法完全设置样式（IE＆gt; 7和FF将强制出于安全原因，弹出窗口上的地址栏。）

在自定义大小弹出窗口中打开任何链接的最佳轻量级不显眼解决方案是什么？

3 个答案: