используя simplemodal, показывать счетчик загрузки, пока загружается содержимое внутри iframe

Question

используя simplemodal, показывать счетчик загрузки, пока загружается содержимое внутри iframe

Доброе утро!

Я использую отличный плагин SimpleModal для jQuery от Эрика Мартина. В настоящее время я загружаю модальное окно с помощью iframe для загрузки запрошенных страниц, которые работают должным образом. То, что я хотел бы реализовать, - это счетчик загрузки..., который отображается во время загрузки содержимого.

Я загружаю свое модальное окно следующим образом:

jQuery(function ($) {
    // Load dialog on click
    $('.basic').click(function (e) {
        var src = "http://localhost" + $(this).attr("href");
        $.modal('', {
            closeHTML: "<a title='Close' class='modalCloseImg simplemodal-close'></a>",
            containerId: "simplemodal-container",
            overlayId: "simplemodal-overlay",
            overlayClose: true
        });

        return false;
    });
});
</code></pre><p>У меня есть фоновое изображение, установленное для моего модального контейнера, которое отображается сразу. Я определенно предпочел бы показать здесь загрузчик. </p></p>
         </div>
         <div class="votes-question">
            <div class="vote-count" itemprop="upvoteCount">6</div><i class="fa fa-thumbs-o-up"></i>
         </div>
         <div class="tags">
            <a href="/questions/tagged/jquery" class="tag"  title="jquery" rel="tag">jquery</a> <a href="/questions/tagged/iframe" class="tag"  title="iframe" rel="tag">iframe</a> <a href="/questions/tagged/spinner" class="tag"  title="spinner" rel="tag">spinner</a> <a href="/questions/tagged/loading" class="tag"  title="loading" rel="tag">loading</a> <a href="/questions/tagged/simplemodal" class="tag"  title="simplemodal" rel="tag">simplemodal</a>         </div>
         <div class="clearfix"></div>
         <div class="action-time">
            задан messedupfir            <span title="6 March 2012 в 14:37 ">6 March 2012 в 14:37 </span>
         </div>
         
         <a class="s-link" href="/questions/612079/ispolzuja-simplemodal-pokazyvat-schetchik-zagruzki-poka-zagruzhaetsja-soderzhimoe-vnutri-iframe" title="поделиться">поделиться</a>
      </div>
   </div>
  <div style="height:100px;margin:10px 0px;" class="">

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- siteask before post --> <ins class="adsbygoogle"      style="display:block;height:100px"
                                                                                                                             data-ad-client="ca-pub-2355906945027976"
                                                                                                                             data-ad-slot="" data-ad-format="auto"></ins>
    <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

    </div>
   <div class="answers" id="answers">
   
      <h2 class="pull-left"><span itemprop="answerCount">0</span> ответов</h2>
      <div class="clearfix"></div>

      <div class="answer-pager">
         <div class="pagination">
                     </div>
      </div>

            <div style="margin-top: 20px;">
          Другие вопросы по тегам:          <div class="tags" style="display: inline-block; float: none;">
         <a href="/questions/tagged/jquery" class="tag"  title="jquery" rel="tag">jquery</a> <a href="/questions/tagged/iframe" class="tag"  title="iframe" rel="tag">iframe</a> <a href="/questions/tagged/spinner" class="tag"  title="spinner" rel="tag">spinner</a> <a href="/questions/tagged/loading" class="tag"  title="loading" rel="tag">loading</a> <a href="/questions/tagged/simplemodal" class="tag"  title="simplemodal" rel="tag">simplemodal</a>       </div>
        <h3 class="m-t-20">Похожие вопросы:</h3>

        <div class="related-block">
          <ul>
                          <li><div class='votes-answer green'><span class='vote-count'>59</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/127174/chto-luchshij-sposob-sostoit-v-tom-chtoby-vynudit-sebja-k-osnovnomu-vi-zakrytyj" title="Что лучший способ состоит в том, чтобы вынудить себя к основному vi? [закрытый]">Что лучший способ состоит в том, чтобы вынудить себя к основному vi? [закрытый]</a> - 9 April 2009 03:44 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>40</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/89465/kak-luchshe-vsego-obnaruzhit-mobilnoe-ustrojstvo" title="Как лучше всего обнаружить мобильное устройство?">Как лучше всего обнаружить мобильное устройство?</a> - 24 April 2019 12:27 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>36</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/82961/kak-luchshe-vsego-obnaruzhit-ustrojstvo-s-sensornym-ekranom-s-pomoschju-javascript" title="Как лучше всего обнаружить устройство с «сенсорным экраном» с помощью JavaScript?">Как лучше всего обнаружить устройство с «сенсорным экраном» с помощью JavaScript?</a> - 15 October 2013 16:24 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>31</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/83542/jquery-sovety-i-hitrosti" title="jQuery Советы и хитрости">jQuery Советы и хитрости</a> - 25 September 2017 20:50 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>31</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/2517/jquery-extend-i-object-az-z-ign-fail-duplicate" title="jQuery.extend () и Object.assign fail [duplicate] ">jQuery.extend () и Object.assign fail [duplicate] </a> - 22 March 2017 17:17 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>31</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/11647/kak-sopostavit-collator-vnutri-pol-zovatel-skoj-sortirovki-dlya-ob-ektov-v-jz-duplicate" title="Как сопоставить Collator внутри пользовательской сортировки для объектов в JS [duplicate] ">Как сопоставить Collator внутри пользовательской сортировки для объектов в JS [duplicate] </a> - 17 June 2015 03:09 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>30</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/1006/kak-poluchit-razniczu-kolichestva-dnej-vy-chislyaya-dve-daty-ispol-zuya-javaz-cript-duplicate" title="Как получить разницу количества дней, вычисляя две даты, используя javascript [duplicate] ">Как получить разницу количества дней, вычисляя две даты, используя javascript [duplicate] </a> - 14 May 2013 19:13 </li>
                          </ul>
        </div>

      </div>
   </div>
   
</div>      </div>
      <aside class="sidebar">
        <div class="awrap">

<script async src="https://yastatic.net/pcode-native/loaders/loader.js"></script>
<script>
    (yaads = window.yaads || []).push({
        id: "553274-2",
        render: "#id-553274-2"
    });
</script>
<div id="id-553274-2"></div>
          <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:600px"
     data-ad-client="ca-pub-2355906945027976"
     data-ad-slot="8038370725"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>


        </div>
      </aside>

    </div>
  </div>
  <footer class="footer">
    <div class="wrapper wrapper--sm">
      <div class="footer-navs-col">
        <div class="footer-nav footer-nav--menu">

          <div class="footer-coryright">© 2017 - 2020 Вопросы и ответы по программированию</div>
        </div>
        <div class="footer-nav footer-nav--catalog">
        </div>
      </div>
      <div class="footer-contacts-col">
        <div class="soc-widget-col">
        </div>
      </div>
      <div class="clearfix"></div>
    </div>

  </footer>

</div>

<script type="text/javascript" src="/js/ui/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/js/ui/external/jquery.cookie.js"></script>

<script type="text/javascript" src="/js/versions/menu.ru.u1607887878.js"></script>


<script type="text/javascript" src="/js/jquery.fancybox.min.js"></script>
<script type="text/javascript" src="/js/slick.min.js"></script>
<script type="text/javascript" src="/js/jquery.maskedinput.min.js"></script>

<script type="text/javascript" src="/js/versions/scripts.ru.u1607887878.js"></script>


<!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; var z = null;m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(90030325, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/90030325" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter -->


<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-123993370-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-123993370-1');
</script>

</div>
<script type="application/ld+json">
  {
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Программирование - вопросы и ответы",
  "alternateName": "Программирование - вопросы и ответы",
  "url": "https://legkovopros.ru",
  "potentialAction": {
     "@type": "SearchAction",
     "target": "https://legkovopros.ru/search?search={search_term_string}",
     "query-input": "required name=search_term_string"
   }
}
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Программирование - вопросы и ответы",
  "url": "https://legkovopros.ru",
  "logo": "https://legkovopros.ru/i/logo.png",
  "email": "info@legkovopros.ru",
   "telephone": ""

}




</script>
</body>
</html>