0

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

1 Answer 1

0

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.

4
  • So I need to add the above code inside each modal? or in the header of my HTML file? Thanks
    – AbdA
    Aug 3, 2018 at 22:48
  • 1
    No, you need to add the above code at the end of file (end of footer) inside <script > tag. I have edited my answer. For more info about document.ready() function refer this link. learn.jquery.com/using-jquery-core/document-ready
    – Rishi
    Aug 4, 2018 at 4:14
  • I tried that it didn't work. Do you think there is a way to stop all the Modals and their content from loading until I click on the modal itself? Sorry to bother you and thank for your help
    – AbdA
    Aug 7, 2018 at 0:59
  • You can use ajax to load the content inside the modal. Dec 17, 2018 at 7:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.