Bootstrap 5 modal won't dismiss-CodePudding

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.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

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

<div id="date-filter-modal"  tabindex="-1" role="dialog">
  <form method="get">
    <input type="hidden" name="ftype" />
    <input type="hidden" name="fid" />
    <div  role="document">
      <div >
        <div >
          <h5 ></h5>
          <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div >
          <div >
            <div >
              <div >
                <label >Start Date</label>
                <input  type="date" />
              </div>
            </div>
            <div >
              <div >
                <label >End Date</label>
                <input  type="date" />
              </div>
            </div>
          </div>
        </div>
        <div >
          <div>
            <button type="button" >Clear</button>
          </div>
          <div>
            <button type="submit" >Set Filter</button>
            <button type="button"  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>

Can anyone suggest what I might have missed?

CodePudding user response：

I 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.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"  tabindex="-1" role="dialog">
    <form method="get">
        <input type="hidden" name="ftype" value="ShipDate">
        <input type="hidden" name="fid">
        <div  role="document">
            <div >
                <div >
                    <h5 >Ship Date Filter</h5>
                    <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div >
                    <div >
                        <div >
                            <div >
                                <label >Start Date</label>
                                <input  type="date">
                            </div>
                        </div>
                        <div >
                            <div >
                                <label >End Date</label>
                                <input  type="date">
                            </div>
                        </div>
                    </div>
                </div>
                <div >
                    <div>
                        <button type="button" >Clear</button>
                    </div>
                    <div>
                        <button type="submit" >Set Filter</button>
                        <button type="button"  data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

CodePudding user response：

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');

CodePudding user response：

You need to add 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.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

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

<div id="date-filter-modal"  tabindex="-1" role="dialog">
  <form method="get">
    <input type="hidden" name="ftype" />
    <input type="hidden" name="fid" />
    <div  role="document">
      <div >
        <div >
          <h5 ></h5>
          <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div >
          <div >
            <div >
              <div >
                <label >Start Date</label>
                <input  type="date" />
              </div>
            </div>
            <div >
              <div >
                <label >End Date</label>
                <input  type="date" />
              </div>
            </div>
          </div>
        </div>
        <div >
          <div>
            <button type="button" >Clear</button>
          </div>
          <div>
            <button type="submit" >Set Filter</button>
            <button type="button"  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>