How to Load iframe content in Popup div?

Issue

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.

$(document).ready(function(){
  $(".openpop").click(function(){
    var x =    $(this).attr('href');
    alert(x);
    y =  x.replace('#', '');
    alert(y);
    $(".popup").toggle();
    $("iframe").attr("href", y);

  });

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

});

HTML

<a class="openpop" href="#http://www.google.com">Link 1</a>
<a class="openpop" href="#http://www.yahoo.com">Link 2</a>
<a class="openpop" href="#http://www.w3schools.com">Link 3</a>
<div class="wrapper">
<div class="popup">
<iframe src="">
  <p>Your browser does not support iframes.</p>
</iframe>
<a href="#" class="close">X</a></div>
</div>

Solution

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

<div class="links">
    <a class="openpop" href="http://getbootstrap.com/">Link 1</a>
    <a class="openpop" href="http://www.jsfiddle.net">Link 2</a>
    <a class="openpop" href="http://www.w3schools.com">Link 3</a>
</div>
<div class="wrapper">
    <div class="popup">
        <iframe src="">
            <p>Your browser does not support iframes.</p>
        </iframe>
<a href="#" class="close">X</a>
    </div>
</div>

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 :)

Answered By - Dwza