Bootstrap 4 Modal Not Closing Properly On Hide

I had this working in bootstrap 3 but in bootstrap 4 (beta) I've had no luck.

The modal itself is coded like the following (simple sign in form)

<div class="modal fade" id="signInModal" tabindex="-1" role="dialog" aria-labelledby="signInModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="signInModalLabel">Sign In</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form class='form-horizontal' role="form" id='signIn'>
        <div class="modal-body">
            <div class="form-group">
              <label class="control-label col-2" for="email">Email:</label>
              <div class="col-10">
                <input type="text" class="form-control" name="credentials[email]" placeholder="Enter email" required>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-2" for="pwd">Password:</label>
              <div class="col-10">
                <input type="password" class="form-control" name="credentials[password]" placeholder="Enter password" required>
              </div>
            </div>
        </div>
        <div class="modal-footer">
          <span class="badLoginAttempt" id="badLoginAttempt"></span>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Sign In</button>
        </div>
      </form>
    </div>
  </div>
</div>

And it's opened with a link in a bootstrap nav bar

<a class="nav-link" data-toggle="modal" href="#signInModal">Sign In</a>

It opens fine and can be dismissed with no problem. The issue is when I submit it. First I perform an ajax request, if it fails nothing happens, but when it succeeds the modal is hidden using:

$('#signInModal').modal('hide')

Which used to work fine in bootstrap 3, but now the backdrop isn't going away and it locks me out from doing anything else until refresh. I tried toggle as well but no change.

I tried adding

data-backdrop="false"

to the modal which gets rid of the backdrop issue, but then I get a new issue that I can no longer simply click outside the modal window to dismiss it. It also looks a lot worse visually.

Also a second problem which is probably related to the first issue is that after I manually hide the modal, the sign in button wont open any more. If I click it a bunch at best it will flash on the screen and go away.

Really confused why it broken so much switching from bootstrap 3 to 4. I'm following the documentation and matching as much as possible exactly how things should be called.

回答1:

I faced this same issue to, but removing the fade class solved it for me.

回答2:

After fighting this for a while I discovered the issue was because my webpack configuration still contained a leftover part that was using bootstrap-sass. So I basically had both bootstrap 3 and 4 at the same time and that caused pretty much everything. After completely removing bootstrap-sass the form now properly works.