Bootstrap 5 模式不会关闭

问题描述 投票：0回答：4

我的所有模态表单都工作正常。但这是我从 Bootstrap 4 移植到 Bootstrap 5 的一个，它不会关闭。关闭按钮（弹出窗口顶部的 X）不会关闭模式。并且“取消”按钮不会关闭模式。

我将

data-dismiss
更新为
data-bs-dismiss
。我不知道我还缺少什么。没有 JavaScript 错误。

$('#open-modal').on('click', function() {
  var $modal = $('#date-filter-modal');
  $modal.show();
});
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<button id="open-modal" type="button" class="btn btn-primary">Open Modal</button>

<div id="date-filter-modal" class="modal" tabindex="-1" role="dialog">
  <form method="get">
    <input type="hidden" name="ftype" />
    <input type="hidden" name="fid" />
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="control-label">Start Date</label>
                <input class="form-control start-date" type="date" />
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="control-label">End Date</label>
                <input class="form-control end-date" type="date" />
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer d-flex justify-content-between">
          <div>
            <button type="button" class="clear-date-filter btn btn-danger">Clear</button>
          </div>
          <div>
            <button type="submit" class="btn btn-success">Set Filter</button>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

任何人都可以建议我可能错过了什么吗？

javascript html twitter-bootstrap bootstrap-modal bootstrap-5
4个回答
1
投票

看来您没有初始化模式。从模态中删除 

display: block
并正确“显示”它，如下所示：

let modal = new bootstrap.Modal('#date-filter-modal')
modal.show()
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

<div id="date-filter-modal" class="modal" tabindex="-1" role="dialog">
    <form method="get">
        <input type="hidden" name="ftype" value="ShipDate">
        <input type="hidden" name="fid">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Ship Date Filter</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">Start Date</label>
                                <input class="form-control start-date" type="date">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">End Date</label>
                                <input class="form-control end-date" type="date">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-between">
                    <div>
                        <button type="button" class="clear-date-filter btn btn-danger">Clear</button>
                    </div>
                    <div>
                        <button type="submit" class="btn btn-success">Set Filter</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

0
投票

看来我发现了问题。

在 Bootstrap 4 下，我会像这样显示模式：

$modal.modal();

这在 Bootstrap 5 下没有任何作用，所以我将其更改为：

$modal.show();

这可行，但我猜它不再使用 Bootstrap 模态逻辑。它只是使表单可见。无论哪种方式，它都会阻止正常的解雇逻辑工作。

正确的语法是：

$modal.modal('show');
0
投票

您可以尝试为

.btn-close
添加功能。

let modal = new bootstrap.Modal('#date-filter-modal')
modal.hide()

$('#open-modal').on('click', function() {
  var $modal = $('#date-filter-modal');
  modal.show();
});

$('.btn-close').on('click', function() {
  var $modal = $('#date-filter-modal');
  modal.hide();
});
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<button id="open-modal" type="button" class="btn btn-primary">Open Modal</button>

<div id="date-filter-modal" class="modal" tabindex="-1" role="dialog">
  <form method="get">
    <input type="hidden" name="ftype" />
    <input type="hidden" name="fid" />
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="control-label">Start Date</label>
                <input class="form-control start-date" type="date" />
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="control-label">End Date</label>
                <input class="form-control end-date" type="date" />
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer d-flex justify-content-between">
          <div>
            <button type="button" class="clear-date-filter btn btn-danger">Clear</button>
          </div>
          <div>
            <button type="submit" class="btn btn-success">Set Filter</button>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

0
投票

引导程序v4.3.1：

<button type="button" id="btnCloseCategories" class="btn btn-danger" data-dismiss="modal">Close</button>

引导程序v5.1.0：

<button type="button" id="btnCloseCategories" class="btn btn-danger" data-bs-dismiss="modal">Close</button>

旧： 数据解除=“模态”

新： 数据-bs-dismiss =“模态”

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.