Modal 中的引导和嵌入内容

Question

我正在使用 Bootstrap 的 JavaScript 模态插件向我的网站添加对话框 Albyati.com 一切看起来都很棒，但是当页面加载时，每个模式中的所有内容都会加载。我试图找出一种方式，其中 Modal 中的内容不会在初始页面加载时加载，并且仅在我单击 modal 时加载。

这是每个模态内部的示例。如您所见，我在模态框内有许多嵌入式项目（我在网站上有多个模态框），当我的网站加载所有嵌入式 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 和脚本不会被加载。