javascript - How to only load iframe block when clicking on it? -

i've tried find out how codes different , nothing works. end ruining link or popup itself. so, i've got 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 want load iframe-block when click on "click link" link. how have change script that? suggestions? :)

update

the snippet provided pretty simple, assume when tested it, either missed of code or placed things in wrong order, or site interfering somehow.

so did made primary page (index.html) needs function on it's own. made second page (target.html) test page resides in iframe.

here's demo

---

simplified functions by:

• giving popup id #tgt
• removed <link> element; it's not anchor <a> it's external stylesheets
• gave each anchor empty href attribute
• placed e.preventdefault() in each click function avoid <a> default behavior of jumping location.
• replaced iframe's src={..} template root, can change back, did 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>