Bootstrap 4模式不會關閉

Question

我有一個Bootstrap 4模式，它在單擊按鈕時彈出，但是永遠不會關閉（刷新時除外）。 我試圖通過單擊“關閉”按鈕或單擊主頁正文來使其關閉。

我已經嘗試過此頁面中類，數據切換，目標等屬性的每種組合： https : //getbootstrap.com/docs/4.0/components/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> 

這是模式本身的代碼：

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

我可以用任何一種關閉它的方法都很好，我只需要以某種方式關閉它即可。

編輯：將“ modal-dialog”作為類添加到第二個div允許我關閉模態，但是它也增加了很多不必要的樣式。

第二次編輯：我將“模態對話框”移至下一個div，它修復了所有問題。

Answer 1

也許頁面中有多個模式，您可以為關閉按鈕指定一個ID，然后使用jquery關閉模式。 假設id =“ closeBtn”。 然后，您可以使用

$('#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);