Bootstrap 4 modal won't close

Question

I have a Bootstrap 4 modal that pops up on button click but will never close (except on refresh). I'm trying to make it close by clicking the 'close' button or by clicking on the main page body.

I've tried every combination of the class, data-toggle, target, etc. attributes from this page: https://getbootstrap.com/docs/4.0/components/modal/

Here's the code to open the modal:

      <div class="collapse navbar-collapse" id="navbarSupportedContent-555">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a id="create-event" data-toggle="modal" data-target="#createModal" class="nav-link" href="#">Create Event</a>
          </li>
        </ul> 

Here's the code for the modal itself:

<div class="modal-container register modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="row" role="document">
          <div class="col-md-3 register-left">
              <i class="far fa-calendar-alt fa-10x"></i>
              <h3>Create a new event</h3>
              <!-- <input type="submit" data-toggle="modal" data-target="#createModal" name="" value="Done"/><br/> -->
              <button type="button" class="btn btn-default" aria-label="Close" data-toggle="modal" data-target="#createModal" class="close" data-dismiss="modal">Close</button>
          </div>
          <div class="col-md-9 register-right">
              <div class="tab-content" id="myTabContent">
                  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                      <h3 class="register-heading">Parr Family</h3>
                      <div class="row register-form">
                          <div class="col-md-6">
                              <div class="form-group">
                                  <input type="text" class="form-control" placeholder="Add event" value="" />
                              </div>
                              <div class="form-group">
                                  <input type="text" class="form-control" placeholder="Description" value="" />
                              </div>
                              <div class="maxl">
                                  <label class="radio inline"> 
                                      <input type="radio" name="person-select" value="helen" checked>
                                      <span class="person-select-span"> Helen </span> 
                                  </label>
                                  <label class="radio inline"> 
                                      <input type="radio" name="person-select" value="bob">
                                      <span class="person-select-span"> Bob </span> 
                                  </label>
                                  <label class="radio inline"> 
                                      <input type="radio" name="person-select" value="violet">
                                      <span class="person-select-span"> Violet </span> 
                                  </label>
                                  <label class="radio inline"> 
                                      <input type="radio" name="person-select" value="dash">
                                      <span class="person-select-span"> Dash </span> 
                                  </label>
                                  <label class="radio inline"> 
                                      <input type="radio" name="person-select" value="jackjack">
                                      <span class="person-select-span"> Jack-Jack </span> 
                                  </label>
                              </div>
                          </div>
                          <div class="col-md-6">
                              <div class="form-group">
                                  <input type="date" class="form-control" placeholder="Date" value="" />
                              </div>
                              <div class="form-group">
                                  <input type="time" class="form-control" placeholder="Time" value="" />
                              </div>
                              <input type="submit" class="btnRegister"  value="Create"/>
                          </div>
                      </div>
                  </div>
                </div>
          </div>
      </div>

  </div>

I'm fine with either method of closing it, I just need it to close in some way.

Edit: Adding 'modal-dialog' as a class to the second div allows me to close the modal, but it also adds a lot of unwanted styling.

Second edit: I moved 'modal-dialog' to the next div and it fixed everything.

Answer 1

Maybe you have more than one modal in the page.You can give an id to the close button and use jquery to close the modal. Let's say the id="closeBtn". Then, you can close the modal using

$('#closeBtn').click(function(e){
    e.preventDefault();
    $('#createModal').modal('hide');
})

Answer 2

 var modal = document.getElementById('createModal'); function Close() { modal.style.display = 'none' } var close = document.getElementsByClassName('close'); close.addEventListener('click', Close);