在Modal中引導和嵌入內容

Question

我正在使用Bootstrap的JavaScript模態插件將對話框添加到我的網站Albyati.com一切看起來都很不錯，但是當頁面加載時，每個模態中的所有內容都會加載。 我試圖找出一種方法，使模態內部的內容不會在初始頁面加載時加載，而僅在單擊模態時才加載。

這是每個模態內的示例。 如您所見，我在模式中有很多嵌入式項目（網站上有多個模式），當我的網站加載所有嵌入式iframe和腳本時，這會減慢頁面加載時間。

    <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>

謝謝

Answer 1

首先將模態空白。 加載文檔后，您可以將這些HTML附加到所需的模式。

</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>

這樣，在加載所有dom元素之前，不會加載不需要的iframe和腳本。