Trying to load a different iframe within a div popup box depending on which of several links is clicked to open the box

I have an overlay popup box (DIV + JavaScript + some CSS) which is toggled by a link, like this:

<a href="#" onclick="popup('popUpDiv')">

The box that pops up contains an iframe. Now I want different links on my page to load different iframes when the box opens; so that link A would toggle the box开发者_开发问答 to appear, and load iframe1.html inside the box, while link B would toggle the same box to appear, but load iframe2.html inside the box, and so forth.

I'm a beginning programmer, and I first figured maybe this could be done with PHP, by putting something like this inside the popUpDiv:

<iframe src="http://mysite.com/iframe<?php echo $_GET ["iframeid"] ?>.html">

... and then simply adding ?iframeid=x to each link's href, where x is the id of the iframe to be loaded.

This obviously won't work in practice though, because it requires a page reload, and when the link is clicked, the popUpDiv is toggled to open, but at the same instant, the page reloads, now with the ?iframeid=x query string in place, but too late, since the popUpDiv disappeared on reload.

Is there perhaps a JavaScript equivalent that could be used, or can anybody suggest another way to make this work?

FYI, this is the kind of popup box I'm working with: http://www.pat-burt.com/csspopup.html

I finally found a really simple way of accomplishing this without additional JavaScripting, by simply using the target attribute:

<iframe name="myfavoriteiframe">

Then:

<a href="http://example.com/iframecontent.html" target="myfavoriteiframe" onclick="popup('popUpDiv')">This is a link.</a>

P.S. Just FYI for any of those out there who might want to use this feature with Vimeo's JavaScript API, as I'm doing: In order to make API buttons work with this target method, it seems like the iframe src-attribute cannot be left blank. You need to specify a link to any of your videos in the src, so that a video loads into the iframe on page load, like this:

<iframe name="myfavoriteiframe" id="player_1" src="http://player.vimeo.com/video/[the_number_of_your_video]?api=1&amp;player_id=player_1">

I simply inserted the URL to the first video on my page, but you can use any of them, since they're hidden anyway.

Then link to any of your videos using the target method described above, and the pre-set iframe video will be replaced by a video of your choice.

Create two divs with the two variations of content (the two iframes with each specific URL). Then toggle by the name of the div.

<a href="#" onclick="popup('popUpDiv1')">
<a href="#" onclick="popup('popUpDiv2')">

Set the id attributes of the div elements appropriately.

Rather than adding something to the popup DIV element, I would add a required link to the href property of the link that you use to open the popup:

<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">

And then inside the popup function I would take the href parameter of the link that has triggered the event and use it in a popup:

function pre_popup(id) {
    // Take the href parameter of the link
    var href = this.href;

    // And then use it in the iframe
    window.frames["your_iframe"].src = href;

    // And then pop it
    popup(id);
}