How to Load iframe content in Popup div?

Question

How to Load iframe content in Popup div. popup div will be open on click of each link from each link, page url will load to iframe href inside popup div.

$(docu         


        

Answer 1

First, you don't need # in the link. Just call e.preventDefault(); to stop the link from executing.

For security reasons you can't open every link eg. google.

Also you might not use toggle because you allways have to click it twice if a frame is opend already.

here is a working fiddle

html

    Link 1
    Link 2
    Link 3


    

        
X
    

jquery

$(document).ready(function () {
    $(".popup").hide();
    $(".openpop").click(function (e) {
        e.preventDefault();
        $("iframe").attr("src", $(this).attr('href'));
        $(".links").fadeOut('slow');
        $(".popup").fadeIn('slow');
    });

    $(".close").click(function () {
        $(this).parent().fadeOut("slow");
        $(".links").fadeIn("slow");
    });
});

of course you have to do some changes in styling for better view experience :)