Menu
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>
692
Click the dropdown and select IFrame. Enter the URL of the page you want to be loaded into your popup. The contents of that page will get loaded into an iframe tag. The URL you enter here will act as the default or fallback URL for the popup. You can override or force with a Click Open trigger if needed.
Introduction: An Iframe is used to display a web page (or possibly a document) within a web page, i.e. it loads the contents of a page (or document) inside the current page. Approach 1: For adding additional div’s in an iframe, you need to use a wrapper div, that wraps the contents of your intended div and the iframe into one unit.
Under the Choose the method used to load dynamic content heading, the Load From URL option is the default. Click the dropdown and select IFrame. Enter the URL of the page you want to be loaded into your popup. The contents of that page will get loaded into an iframe tag. The URL you enter here will act as the default or fallback URL for the popup.
To open the new popup window, we have used the JavaScript window open () method. You can see that we have first take the method into a variable. We also have set the width and height of our window. After that, we use the document.write () method to write our div element content into the new popup window.
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 :)
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
