如何在弹出框中打开链接？答案

【问题标题】：How to open link in popup box?如何在弹出框中打开链接？
【发布时间】：2015-07-03 19:57:43
【问题描述】：

我想将此链接作为弹出框打开：

  <a href="/upload/" onclick="window.open(this.href, 'windowName', 'width=500, height=350, left=24, top=24, scrollbars, resizable'); return false;">Upload pic</a>

目前，它在一个窗口中打开，但我想要的是一个裸露的弹出框。如何使用 js 或 jQuery 来实现？

更新：该链接位于表单组内，并且正如许多here 所建议的那样，使用 iframe 会导致表单提交（虽然不知道为什么）。所以我寻找一个非 iframe 解决方案。

【问题讨论】：

看jQuery UI jqueryui.com/dialog

标签： javascript jquery

【解决方案1】：

使用iframe 元素构建您自己的弹出框；

onclick你可以把iframe的src改成你想要的那个

document.getElementById('modalBtn').onclick = displayPopup;

function displayPopup() {
  var popup = document.getElementById("popup");
  var frame = document.getElementById('popupFrame');
  frame.src = "https://www.bing.com";
  popup.style.display = "block";
}

#popup {
  width: 320px;
  height: 300px;
  margin: 0 auto;
  box-shadow: 1px 1px 1px 1px black;
  display: none;
}
#popup iframe {
  width: 100%;
  height: 100%
}

<div id="popup">
  <iframe id="popupFrame" src=""></iframe>
</div>

<button id="modalBtn">Display Popup</button>

【讨论】：

@randi 将此与引导模式或类似模式配对，你会很高兴
@DelightedD0D 如何在此添加 onclick 事件？
@NicholasKyriakides 不幸的是，在我的实现中，iframe 只是在点击时闪烁并立即消失。有什么想法吗？

【解决方案2】：

哎呀.. 误读了您的问题

重新回答：

使用 jQuery。

$(document).ready(function (){
    $("#testButton").click(function() {$('#overlayContainer').show();});
});

Jsfiddle Demo

【讨论】：

这不是和OPs代码一样的结果吗？你刚刚把它变成了一个单独的函数
这并没有打开所需的链接。
如何将目标链接/upload/添加到这个sn-p？
使用 fancybox.net 'iFrame 方法'