来自另一个 HTML 文件的 BootStrap 4 模态内容

Question

I am trying to load a modal with content from another HTML file and have used both of these similar questions as references: Getting bootstrap modal content from another HTML file

Getting Bootstrap's modal content from another page

In my case, the modal is in the home.html and I want to load another file contact.html as the content into the modal

My Code: 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>

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

However I am having a similar issue to the one mentioned in the first post, where my modal is loading nothing and is just a thin white bar (empty modal). I am already running XAMPP as a server to localhost, and I don't see anything in my console as errors/warnings. Additionally, this solution is for BootStrap 3 which the doc says the remote href is now depreciated.

So if I follow the second post (second solution which is updated for BS4) however and attempt to add these scripts (2 different functions that I found through other searches, I have tried both independently):

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

I suffer the same problem as one of the commenters where I get this: [Error] TypeError:'$('...').modal('...').find('...').load' is not a function.

Answer 1

If you are using jQuery to load the modal, then remove data-toggle and data-target from the signup button. Also, I'd recommend storing the link in a different attribute as maybe something is wonky about using 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'));
  });

Another option is maybe try to split up the 'show'.. although this is likely not the issue... but i think worth a try

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

Answer 2

I am just a coding scrub and had sourced the wrong version of jquery (slim, which does not support ajax calls like .load()). Make sure to use the full version of jquery!!!