CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Jeff
Jeff

Reputation: 73

Bootstrap Modal Closing Behavior

I have a button Sign Up that loads in content from another file in the form of a Modal. When I click the button for the first time, the script works normally with no errors/warnings. However after the first time, if I dismiss the modal by clicking off of the element, clicking the Sign Up button again STILL WORKS, however it now throws a console error, stating $(...).modal(...).find(...).load(...) is not a function. In another one of my posts trying to solve this issue, I discovered the .load() method wouldn't work because I had the wrong version of jquery sourced in the file. But since then I have fixed that issue and the Modal now works, so I don't understand where this error is coming from.

Secondly, when the modal appears, it darkens the rest of the page (normal behaviour of the modal), if I try to dismiss the modal using the close button in the header, the modal disappears however the rest of my page is left darkened?/left out of focus? and the page becomes un-interactable...

Thirdly, I posted this as a seperate question due to the difference in nature: Bootstrap Modal messes up Carousel CSS

How do I fix these issues?

HTML file

<!-- NavBar -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Land Power</a>
      <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>
          <!-- <li class="nav-item ">
            <a class="nav-link" href="contact.html">Contact Us<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" linkFile="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 class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Sign Up</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">

        </div>
      </div>
    </div>
  </div>

Modal content load script

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

Upvotes: 2

Views: 229

Answers (1)

fatchild
fatchild

Reputation: 56

I think the issue here is likely that you are including bootstrap from two sources. Check your code to make sure you are including bootstrap from only one source. I had a similar issue not too long ago, solved when I realized bootstrap was being automatically included from another CDN.

Here is a jsfiddle containing your code inside a bootstrap template. It works as you have described it to.

https://jsfiddle.net/fatchild/b04r7Ljo/3/

It is a good idea to take your code out of context into a tool like JSfiddle in order to isolate the bug. As you can see there is nothing wrong with the code you have supplied.

Upvotes: 1

Related Questions