javascript - 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 允许我关闭模式，但它也添加了很多不需要的样式。

第二次编辑:我将“modal-dialog”移动到下一个 div，它修复了所有问题。

Answer 1

也许你的页面中有多个模式。你可以给关闭按钮一个id，然后使用jquery来关闭模式。比方说 id="closeBtn"。然后，您可以使用

关闭模态

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