Bootstrap and embeded content in Modal

Question

I am using Bootstrap's JavaScript modal plugin to add dialogs to my website Albyati.com Everything is looking great but all contents inside each modal loads when the page loads. I am trying to figure out a way where contents inside the Modal won't load with initial page loading and only loads when I click on the modal.

Here is an example of what inside each modal. As you can see I have many embedded items inside the modal (I have more than one modal on the website)and when my website loads all embedded iframes and scripts slows down my page loading time.

    <div class="portfolio-modal modal fade" id="irma" tabindex="-1" role="dialog" aria-hidden="true">

        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="close-modal">
                    <i class="fas fa-arrow-circle-left fa-2x " data-dismiss="modal"> Back </i>


                </div>
                <div class="container">
                    <div class="row">
                        <div class="modal-body">
                            <div class="title-bar">
                                <div class="col-md-12">
                                    <h2 class="text-center">HURRICANE IRMA SHELTERS PROJECT</h2>
                                    <div class="heading-border"></div>
                                </div>
                            </div>

                            <div class="embed-container">
                                <iframe src="https://rstudio-pubs-static.s3.amazonaws.com/306074_ee60773f13b64a988065207b4858aaba.html" style="border:0">
  </iframe>
                            </div>

                            <div class="project">
                                <p>&nbsp;</p>
                                <p><strong>The Data</strong></p>
                                <p><br />During hurricane Irma, I was stationed in Hawaii but I wanted to help the preparation effort as much as I can, and since the hurricane path was so hard to predict, Florida's emergency services opened many shelters scattered around Florida.</p>
                                <p>After hours of research, I realized there was no one list that includes all the shelters and there was no easy way to find the shelters other than going to Florida's emergency response agency website which provided lists per county and each county has a different website.</p>
                                <p>Long story short, I decided to compile all locations on one list (you can download it here) and create an interactive map that includes all shelters and when the users click on a shelter they will automatically be redirected to Google maps website or app to navigate to the shelter.&nbsp;<a href="https://irp-cdn.multiscreensite.com/5a37bd1f/files/uploaded/FLOpenShelters.xlsx">Download the data here</a></p>
                                <p>&nbsp;</p>
                                <p><strong>The Code</strong></p>
                                <p>There were two major steps implemented to finish coding this map.<br />Get the Geo-location (longitude and latitude) of each shelter by using their physical address. The code below uses R ggmap package and will work on any project just copy the code and run it on your environment. When running the code it will ask for a file to read, make sure to provide a file with a column named addresses.</p>

                                <div class="embed-container">
                                    <iframe src="https://trinket.io/embed/R/30d24b21d2?toggleCode=true" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen="">
  </iframe>
                                </div>

                                <p>&nbsp;</p>
                                <p>The second step of this project is to take the data set created from the first step and utilize plotly, ggmap, and leaflet packages to create the map and link the address to their Google maps location. </p>
                                <p>&nbsp;</p>

                                <div class="embed-container">
                                    <iframe src="https://trinket.io/embed/R/e0fb893c85?toggleCode=true" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen="">
  </iframe>
                                </div>
                            </div>

                            <div style="padding: 25px; text-align: left;">
                                <button class="btn btn-general btn-white" type="button" data-dismiss="modal">
                                      <i class="fa fa-times"></i> Close
                                  </button>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

Thanks

Answer 1

Leave the modal blank at first. After the document gets loaded you can append these HTML to the desired modal.

</html>
<script>
    $( document ).ready(function() {

        // modal 1
        var appendingHtml1 ="<div><iframe>...Your html...</iframe></div>";
        $('#modalId').append(appendingHtml1);

        // modal 2
        var appendingHtml2 ="<div><iframe>...Your html...</iframe></div>";
        $('#modalId').append(appendingHtml2);

    });
</script>

this way the unwanted iframes and scripts wouldn't get load untill all dom elements are loaded.