How to open link in popup box?

Question

I'd like to open this link as a popup box:

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

Currently, it opens in a window, but what I want is a bare popub box instead. How to do so using js or jQuery?

Update: The link is inside a form group and using iframe, as suggested by many here, causes the form to submit (not sure why though). So I look for a non-iframe solution.

Look at jQuery UI https://jqueryui.com/dialog/ – Prashanth Subramanian Apr 25 '15 at 03:22 — Prashanth Subramanian, Apr 25 '15 at 03:22

nicholaswmin · Answer 1 · 2015-04-25T03:35:17.637

2

Build your own popup box with an iframe element;

onclick you can change the src of the iframe to the one you want

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>

edited Apr 25 '15 at 03:35

answered Apr 25 '15 at 03:26

nicholaswmin

21,686
15
91
167

2

@randi Pair this with a bootstrap modal or similar and you'd be good to go – Wesley Smith Apr 25 '15 at 03:27
@DelightedD0D how to add onclick event to this? – Jand Apr 25 '15 at 03:30
@NicholasKyriakides Unfortunately, in my implementation the iframe just flickers onclick and disappears immediately. Any ideas? – Jand Apr 25 '15 at 03:49

Dr Upvote · Answer 2 · 2015-04-25T03:34:14.367

1

Whoops.. misread your question

Re-answer:

Use jQuery.

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

Jsfiddle Demo

edited Apr 25 '15 at 03:34

answered Apr 25 '15 at 03:25

Dr Upvote

8,023
24
91
204

Isn't this the same result as the OPs code? You've just made it into a separate function – Wesley Smith Apr 25 '15 at 03:28
and this does not open the desired link. – Jand Apr 25 '15 at 03:31
How to add the destination link `/upload/` to this snippet? – Jand Apr 25 '15 at 04:06
Use fancybox.net 'iFrame method' – Dr Upvote Apr 26 '15 at 23:55

How to open link in popup box?

2 Answers2

Linked