CODEWITHSUNDEEP
jqueryhtml
PRANAV
PRANAV

Reputation: 1111

How to Load iframe content in Popup div?

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>

Upvotes: 10

Views: 90264

Answers (3)

Ankit Agrawal
Ankit Agrawal

Reputation: 6124

$(document).ready(function() {
    $(".openpop").click(function() {
        var x = $(this).attr('href');
        var y = x.replace('#', '');
        $(".popup").show().html('<iframe src="'+y+'"></iframe>');
        $("iframe").attr("href", y);
    });

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

you can not open google and yahoo in iframe both site don't allow for it please see this link Why Iframe dosen't work for yahoo.com

but you can open w3school with this code

Upvotes: 0

mithunSalinda
mithunSalinda

Reputation: 330

You can also use this

$('#clickme').click( function(){
    $('#showDiv').show();
    $('#iframe').attr('src','your url');
});

Upvotes: 0

Dwza
Dwza

Reputation: 6565

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

Upvotes: 12

Related Questions