admin管理员组

文章数量:1323529

All my modal forms are working fine. But here's one I ported from Bootstrap 4 to Bootstrap 5 and it won't close. The Close button (the X at the top of the popup) won't close the modal. And the Cancel button won't close the modal.

I updated data-dismiss to data-bs-dismiss. I don't know what else I'm missing. There are no JavaScript errors.

$('#open-modal').on('click', function() {
  var $modal = $('#date-filter-modal');
  $modal.show();
});
<link href="/[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=".3.1/jquery.min.js"></script>
<script src="/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

All my modal forms are working fine. But here's one I ported from Bootstrap 4 to Bootstrap 5 and it won't close. The Close button (the X at the top of the popup) won't close the modal. And the Cancel button won't close the modal.

I updated data-dismiss to data-bs-dismiss. I don't know what else I'm missing. There are no JavaScript errors.

$('#open-modal').on('click', function() {
  var $modal = $('#date-filter-modal');
  $modal.show();
});
<link href="https://cdn.jsdelivr/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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

Can anyone suggest what I might have missed?

Share Improve this question edited Aug 5, 2022 at 16:15 isherwood 61.1k16 gold badges121 silver badges169 bronze badges asked Aug 5, 2022 at 14:40 Jonathan WoodJonathan Wood 67.4k82 gold badges303 silver badges529 bronze badges 3
  • It's easy enough to put your code in a snippet with Bootstrap from a CDN. Let's see it! – isherwood Commented Aug 5, 2022 at 14:53
  • $('#date-filter-modal').show() is a jquery method an simply removes display:none, whilst bootstrap.Modal API implements more, either use the API or add in .hide() event or dont use either and use data-bs-toggle="modal" data-bs-target="#date-filter-modal" on the button – Lawrence Cherone Commented Aug 5, 2022 at 15:07
  • @LawrenceCherone: Yes, that's the issue. – Jonathan Wood Commented Aug 5, 2022 at 15:10
Add a ment  | 

6 Answers 6

Reset to default 3

It looks like you did not initialize the modal. Remove display: block from the modal and "show" it properly like so:

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

Bootstrap v4.3.1:

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

Bootstrap v5.1.0:

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

Old: data-dismiss="modal"

New: data-bs-dismiss="modal"

Looks like I found the issue.

Under Bootstrap 4, I would display the modal like this:

$modal.modal();

This does nothing under Bootstrap 5, so I changed it to this:

$modal.show();

That works, but I guess it is no longer using the Bootstrap modal logic. It's simply making the form visible. Either way, it prevents the normal dismiss logic from working.

The correct syntax is:

$modal.modal('show');

You can try adding a function for .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/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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

As @ruleboy21 explained the modal needed to be initialised, that syntax worked for me but I was able to get the same result using an inline script that was more appropriate to my use case:

<script>bootstrap.Modal.getOrCreateInstance(document.getElementById('date-filter-modal')).show()</script>

This is how I solved hiding my modal window programmatically.

let modal = bootstrap.Modal.getInstance(document.getElementById("modal_id"));
modal.hide();

本文标签: javascriptBootstrap 5 modal won39t dismissStack Overflow