Load modal after click link

Question

I've been trying to load a modal content after clicking on link in this case "About Product". Atm on page is more article and every article got modal. So modal's alose been load with page and modal's make web page slower because evrey single modal been load.

I want to make javascript when i click "About Product" the model will start to load or just:

<iframe width="100%" height="540px" src="'.$row['video_url'].'" frameborder="0" allowfullscreen></iframe>

Because this part make page slow

There is rest of code:

<div class="item-col col-xs-12 col-sm-4 col-md-3">
    <div class="product-wrapper">
        <div class="list-col4">
            <img src="../images/'.$row['productimage'].'" alt="'.$row['productname'].'">
        </div>
        <div class="list-col8" style="padding-bottom: 15px;">
            <div class="gridview">
                <div class="padding-games">
                    <span class="special-price"><span><center>'.$row['productname'].'</center></span></span>
                </div>
            </div>
            <a data-toggle="modal" data-target="#'.$row['id'].'">About Product</a>
            <a href="product-'.$row['title'].'">More</a>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<!--   product end -->

<!-- Modal -->
<div id="'.$row['id'].'" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <center><h4 class="modal-title"><img src="../images/'.$row['productimage'].'" alt="'.$row['productname'].'"></h4></center>
            </div>
            <div class="modal-body">
                <iframe width="100%" height="540px" src="'.$row['video_url'].'" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>

Answer 1

OK we can bind the a click event and use it to load the iframe src property, if you don't want to load straight away..

html : We add a data attribute data-link and add iframe link here to use later. We also add class to identify but you can use id if you prefer.

<a class="about_product" data-toggle="modal" data-link="'.$row['video_url'].'"  data-target="#'.$row['id'].'">About Product</a>

iframe

<iframe id="myFrame" width="100%" height="540px" frameborder="0" allowfullscreen></iframe>

script : Here we attach click event to the link with class .about_product . onclick data-src reference is used and set to the iframe

$(document).ready(function () {
    $(".about_product").click(function (e) {
        e.preventDefault();
        $("#myFrame").attr('src', this.dataset.link);       
    })
});

This however is not tested in conjunction with bootstrap js files, so let us know how it goes.

Update: I created a jsfiddle to show how this works.