How to load iframe content in popup div?

Question

How to load iframe content in popup div. popup div will be opened by clicking on each link from each link The page URL will be loaded in an iframe href inside the 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> 

Answer 1

First, you do not need # in the link. Just call e.preventDefault(); to stop the execution of the link.

For security reasons, you cannot open every link, for example. Google

Also, you can not use the switch, because you always need to double-click it if the frame is already open.

here is a working violin

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 need to make some styling changes for a better look :)

Answer 2

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

you cannot open google and yahoo in iframe and the site does not allow it, see this link Why Iframe does not work for yahoo.com

but you can open w3school with this code

Answer 3

You can also use this

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