如何在弹出框中打开链接?

时间:2015-04-25 03:17:54

标签: javascript jquery

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

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

目前,它在一个窗口中打开,但我想要的是一个裸popub框。如何使用js或jQuery?

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

2 个答案:

答案 0 :(得分:2)

使用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>

答案 1 :(得分:1)

哎呀..误读了你的问题

<强>重新答案:

使用jQuery。

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

Jsfiddle Demo