CODEWITHSUNDEEP
javascripthtmlcssiframepopup
Enma Nii
Enma Nii

Reputation: 123

How to only load iframe block when clicking on it?

I've already tried to find out how to actually do it but the codes are always different and nothing works. I always end up ruining the link or the popup itself. So, I've got this code here:

.popup {
    position:fixed;
    display:none;
    top:0px;
    left:0px;
    width:100%;
    height:100%;}

#displaybox {
    width:460px;
    margin:50px auto;
    background-color:#000000;}

.displaybox {
    display:block;
    position:relative;
    overflow:hidden;
    height:800px;
    width:550px;}

.displaybox iframe {
    position:absolute;}


<link><a id="object">click link</a></link>

<script>
$(function(){
   $("link a").click(function(){
      id = $(this).attr("id");
      $(".popup:not(."+id+")").fadeOut(); $(".popup."+id).fadeIn();
   });
   $("a.close").click(function(){
      $(".popup").fadeOut();
   });
});
</script>

<div class="popup object">
    <div id="displaybox"><a class="close">x</a>
<br>
<div class="displaybox"><iframe src="{theiframeblock}" height="800" frameborder="0" width="550"></iframe></div>
</div>

And I want to only load the iframe-block when I click on the "click link" link. How do I have to change the script for that? Any suggestions? :)

Upvotes: 3

Views: 1015

Answers (3)

zer00ne
zer00ne

Reputation: 43880

Update

The snippet I provided was pretty simple, so I assume when you tested it, you either missed some of the code or placed things in the wrong order, or your site is interfering somehow.

So what I did was made the primary page (index.html) with everything it needs to function on it's own. I made a second page as well (target.html) which is the test page that resides in the iframe.

Here's the DEMO

Simplified your functions by:

  • giving your popup an id #tgt
  • removed that <link> element; it's not an anchor <a> it's basically for external stylesheets
  • gave each anchor an empty href attribute
  • placed e.preventDefault() in each click function to avoid the <a> default behavior of jumping to a location.
  • replaced the iframe's src={..} template with the root, you can change that back, I just did that so the demo can function.

$(function() {
  $("a.open").click(function(e) {
      $('#tgt').fadeIn();
      e.preventDefault();
  });
  
  $("a.close").click(function(e) {
    $("#tgt").fadeOut();
      e.preventDefault();
  });
});
.popup {
  position: fixed;
  display: none;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
#displaybox {
  width: 460px;
  margin: 50px auto;
  background-color: #000000;
}
.displaybox {
  display: block;
  position: relative;
  overflow: hidden;
  height: 800px;
  width: 550px;
}
.displaybox iframe {
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="" id="object" class="open" target="tgt">click link</a>



<div id="tgt" class="popup object">
  <div id="displaybox"><a href="" class="close">X</a>
    <br>
    <div class="displaybox">
      <iframe src="/" height="800" frameborder="0" width="550"></iframe>
    </div>
  </div>

Upvotes: 1

OmerZiv
OmerZiv

Reputation: 73

You can do it easily by using jQuery

Try this - https://jsfiddle.net/van06539/

HTML-

<a href="#" id="openFrame">Click Link</a>
<div id="iFrameContainer">
  <iframe src="http://www.bbc.com" id="bestIframeEver" height="600" width="300" style="display:none;">

  </iframe>
</div>

Javascript -

var isOpened = false;

$(document).ready(function() {
  $("#openFrame").click(function() {
    if (!isOpened) {
      $("#bestIframeEver").fadeIn(1000);
    } else {
      $("#bestIframeEver").fadeOut(1000);
    }
    isOpened = !isOpened;
  });
});

You can toggle the open / close state of the iframe

Upvotes: 0

Osmar Matos
Osmar Matos

Reputation: 372

You can use:

$("#object").click(function() { 
   $("iframe").attr("src", "http://www.your-url.com");     
});

Won't allow cross-origin requets

Upvotes: 1

Related Questions