link another html on the same page (javascript)

Question

I would like to link another html(nytimes.html) on the same page on top of this css popup-frame. How do I do that?

$('.portfolio-thumbnail').click(function(e) {
console.log(this.id); //this is how we know what to load into the frame
$('#popup-frame').fadeIn();

switch(this.id) {
case "nytimes":
    //do something for nytimes
    $('#popup-frame').css('background', "rgba(0, 255,0, .5)" );


    break;
case "eloquence":
    $('#popup-frame').css('background', "rgba(255, 82, 145, .5)" );
    break;
default:
    break;
}
});

Do you want to open a link in the iframe? Maybe you want: window.open(mylink,'popup-frame') — Aminadav Glickshtein, Apr 28 '14 at 15:13

score 1 · Answer 1 · edited May 23 '17 at 12:28

I would personally advise you to embed an iFrame within your CSS-popup with the site inside it you want to show ie.

case "nytimes":
    //do something for nytimes
    $('#popup-frame').css('background', "rgba(0, 255,0, .5)" );

    $('#popup-frame').html('<iframe src="nytimes.html" name="popupFrame" scrolling="auto" frameborder="no" align="center" height = "100%" width = "100%"> </iframe>')
    break;

You then can style the iFrame to look how you want including using css zoom property on the iframe to make the content look smaller if you want to slow a "preview" of the page.

link another html on the same page (javascript)

1 Answers1