Bootstrap Uncaught TypeError: $(...).modal 不是函数

Posted 2023-03-24

【中文标题】Bootstrap Uncaught TypeError: $(...).modal 不是函数

【英文标题】：Bootstrap Uncaught TypeError: $(...).modal is not a function

【发布时间】：2020-04-29 12:08:11

【问题描述】：

我正在尝试在将数据提交到 Mailchimp 后自动关闭模式。但这就是发生上述问题的地方。我在这里尝试了几个现有的解决方案，但它们似乎没有解决问题。我已经触发了引导事件，但仍然没有用。我已将带有外部引导程序和 jquery 链接的 mailchimp api 代码粘贴在模态下方（出于隐私考虑，我隐藏了一些部分）。请帮忙。

//functions.php 
    function front_page_popup()  ?>
      <!-- Modal -->
      <div id="newsletter" class="modal fade bd-example-modal-lg rounded-0 mt-3 pr-0" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="container pt-5 px-5 pb-0">
              <div class="d-flex justify-content-center mt-0">
                <i class="fas fa-lightbulb fa-3x"></i>
              </div>
              <div class="d-flex justify-content-center my-2">
                <h1 class="text-center"><strong>Subscribe for Weekly Goodies</strong></h1>
              </div>
              <div class="d-flex justify-content-center my-2">
                <p class="text-secondary text-center">Proven Strategies To Earn Online Straight To Your Inbox.</p>
              </div>
              <div class="d-flex justify-content-center my-4">
                <hr style="width: 75%; border-width: 2px;">
              </div>
              <div class="d-flex justify-content-center my-4">
                <img class="w-25 h-50 rounded-circle" src="https://d1aettbyeyfilo.cloudfront.net/yoursolutions/6999175_1576332391276Thomas_Edison.jpg" >
                <div class="d-flex flex-column bd-highlight my-auto ml-3">
                  <div class="p-2 bd-highlight">
                    <q><em class="text-secondary">Genius is one percent inspiration and ninety-nine percent perspiration.</em></q>
                  </div>
                  <div class="p-2 bd-highlight">
                    <p><strong>Thomas Edison</strong></p>
                  </div>
                </div>
              </div>
            </div>
            <div id="mc_embed_signup" class="container-fluid bg-light">
              <form action="hid--for--privacy--reasons" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" class="needs-validation" novalidate>
                <div class="form-row">
                  <div class="col">
                    <input type="text" name="FNAME" class="form-control form-control-lg mt-5 mb-2 mx-auto" style="width: 80%;" id="mce-FNAME" placeholder="First Name..." required>
                    <div class="invalid-feedback text-center">
                      Please provide your name.
                    </div>
                  </div>
                </div>
                <div class="form-row">
                  <div class="col mb-3">
                    <input type="email" name="EMAIL" class="form-control form-control-lg mt-3 mb-2 mx-auto" style="width: 80%;" id="mce-EMAIL" placeholder="Email Address..." required>
                    <div class="invalid-feedback text-center">
                      Please provide your email address.
                    </div>
                  </div>
                </div>
                <div id="mce-responses" class="clear">
                  <div class="text-center" id="mce-error-response" style="display:none; color: red;"></div>
                  <div class="text-center" id="mce-success-response" style="display:none; color: green;"></div>
                </div>
                <button id="mc-embedded-subscribe" class="btn btn-primary btn-lg btn-block mt-2 mb-5 mx-auto" style="width: 80%; background-color: #9661f3; border-color: #9661f3;" type="submit">
                  <strong>Subscribe Now</strong>
                </button>
              </form>
            <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'>
            </script>
            <script type='text/javascript'>
            (function($) 
              window.fnames = new Array();
              window.ftypes = new Array();
              fnames[0]='EMAIL';
              ftypes[0]='email';
              fnames[1]='FNAME';
              ftypes[1]='text';
              $('#newsletter').modal('hide');
            
            (jQuery));
              var $mcj = jQuery.noConflict(true);
              </script>
            <!--End mc_embed_signup-->
            </div>
          </div>
        </div>
      </div>

    <?php 
    add_filter('wp_footer', 'front_page_popup');

以下是外部链接

//External links in functions.php
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.4.1.slim.min.js', array(), null, true);
wp_enqueue_script('bootstrap-js', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '4.4.1', true);

【参考方案1】：

代替

$('#newsletter').modal('hide');

我认为你需要

$('#newsletter.modal').hide();

甚至只是

$('#newsletter').hide();

【讨论】：

我忘了说。提交数据后，引导验证启动。模式未关闭，但字段已清除，引导验证显示空字段错误。

好的，现在有什么错误吗？因为我的回答应该可以解决你问的关于Bootstrap Uncaught TypeError: $(…).modal is not a function 的错误:)

您能帮我隐藏提交数据的模式吗？

这可能会对你有所帮助：css-tricks.com/…

谢谢。这帮助很大