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>

我都可以关闭它，我只需要以某种方式将其关闭。

编辑：在第二个div中添加“ modal-dialog”作为类可以使我关闭模式，但同时也会增加很多不必要的样式。

第二次修改：我将“模态对话框”移至下一个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);

Bootstrap 4模式不会关闭

2 个答案: