來自另一個HTML檔案的BootStrap4模態內容

我正在嘗試使用另一個 HTML 檔案中的內容加載一個模態，并使用這兩個類似的問題作為參考： 從另一個 HTML 檔案中獲取引導模態內容

從另一個頁面獲取 Bootstrap 的模態內容

就我而言，模態在 中home.html，我想將另一個檔案contact.html作為內容加載到模態中

我的代碼：Home.html

  <!-- NavBar -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <span class="navbar-brand" href="#">Land Power</span>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home<span class="sr-only"></span></a>
          </li>
        </ul>
      </div>
      <div class="d-flex justify-content-end">
        <button class="signup btn btn-outline-success my-2 my-sm-0" type="button" href="contact.html"data-toggle="modal" data-target="#theModal">Sign Up</button>
      </div>
    </div>
  </nav>

  <!-- Modal -->
  <div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
      </div>
    </div>
  </div>

聯系方式.html

    <div class="container mt-5">
      <form action="email.php" method="post" target="iframe">
        <div class="form-group">
          <label for="nameInput1">Name</label>
          <input type="text" name="name" class="form-control" id="nameInput1" aria-describedby="nameHelp" placeholder="Enter name">
        </div>
        <div class="form-group">
          <label for="emailInput1">Email</label>
          <input type="text" name="email" class="form-control" id="emailInput1" placeholder="Enter Email">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
    <iframe name="iframe" frameBorder="0" class="d-block mx-auto alert" role="alert"></iframe>

但是，我遇到了與第一篇文章中提到的問題類似的問題，其中我的模態沒有加載任何內容，只是一個細長的白條（空模態）。我已經將 XAMPP 作為本地主機的服務器運行，并且我在控制臺中沒有看到任何錯誤/警告。此外，此解決方案適用于 BootStrap 3，該檔案稱遠程 href 現在已折舊。

因此，如果我遵循第二篇文章（針對 BS4 更新的第二個解決方案）并嘗試添加這些腳本（我通過其他搜索找到的 2 個不同的功能，我已經獨立嘗試了這兩個功能）：

  <script>
    // $('.signup').on('click', function(e){
    //   e.preventDefault();
    //   $('#theModal').modal('show').find('.modal-content').load($(this).attr('href'));
    // });

    // $('.signup').on('click',function(){
    //   $('#theModal').modal('show').find('.modal-content').load('contact.html',function(){
    //         $('#theModal').modal({show:true});
    //     });
    // });
  </script>

我遇到了與其中一位評論者相同的問題： [Error] TypeError:'$('...').modal('...').find('...').load' is not a function.

uj5u.com熱心網友回復：

如果您使用 jQuery 加載模態，則從注冊按鈕中洗掉 data-toggle 和 data-target。另外，我建議將鏈接存盤在不同的屬性中，因為使用 href 可能有些奇怪。

<button class="signup btn btn-outline-success my-2 my-sm-0" type="button" linkFile="contact.html">Sign Up</button>

  $('.signup').on('click', function(e){
    $('#theModal').modal('show').find('.modal-content').load($(this).attr('linkFile'));
  });

另一種選擇可能是嘗試拆分“表演”……雖然這可能不是問題……但我認為值得一試

  $('.signup').on('click', function(e){
    $('#theModal').find('.modal-content').load($(this).attr('linkFile'));
    $('#theModal').modal('show')
  });

uj5u.com熱心網友回復：

我只是一個編碼清理人員，并且采購了錯誤版本的 jquery（slim，它不支持像 .load() 這樣的 ajax 呼叫）。一定要使用完整版的jquery！！！

標籤：javascript html 推特引导 bootstrap-4

上一篇：如何在繼承第一行類的DataTable上附加TR？

下一篇：使用引導程式時如何將網格4列縮小為1列？