fullscreen modal close when click inside

Question

I have a button and I want to open a full-screen section that contains some inputs

I tried bootstrap's full-screen modal like this:

.filter-modal {
background-color: #fff;
}

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
 <h3> without static backdrop "</h3>

<button type="button" class="w-50 " data-bs-toggle="modal" data-bs-target="#filterModal"  data-keyboard="false">
    <i class="fa fa-filter"></i>
    modal without static backdrop
  </button>

<div class="filter-modal modal fade modal-fullscreen" id="filterModal" data-keyboard="false" tabindex="-1"  aria-hidden="true"  >
  <div class="modal-dialog">
    
      <div class="modal-header">
        <p class="modal-title" id="exampleModalLabel"> item 1</p>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="form-check">
          <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>
          <label class="form-check-label" for="radio1">item2</label>
        </div>
        <div class="form-check">
          <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">
          <label class="form-check-label" for="radio2">  item 3</label>
        </div>
     </div>
  </div>
    </div>
  
  <hr>
  <h3> with static backdrop "</h3>
  <button type="button" class="w-50 " data-bs-toggle="modal" data-bs-target="#filterModal"  data-keyboard="false">
    <i class="fa fa-filter"></i>
    modal with static backdrop
  </button>

<div class="filter-modal modal fade modal-fullscreen" id="filterModal" data-bs-backdrop="static" data-keyboard="false" tabindex="-1"  aria-hidden="true"  >
  <div class="modal-dialog">
    
      <div class="modal-header">
        <p class="modal-title" id="exampleModalLabel"> item 1</p>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="form-check">
          <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>
          <label class="form-check-label" for="radio1">item2</label>
        </div>
        <div class="form-check">
          <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">
          <label class="form-check-label" for="radio2">  item 3</label>
        </div>
     </div>
  </div>

But when I clicked anywhere on the modal, it closed to fix this I tried adding data-backdrop=" static" to the modal, and now it doesn't close on click but none of the buttons and inputs is working also the modal's close button because the same thing happens and it assumes I'm clicking outside, and it tries to say that a modal with an static backdrop is open and as I said, the modal's close button doesn't work too.

As I mentioned before in both situations it assumes I'm clicking outside the modal, but it's a full-screen modal.

Any solution?

Answer 1

Looking at the Bootstrap Modal Documentation, I found two issues with your code:

1. The modal-fullscreen class should be added to the modal-dialog element, not the modal element
2. The modal-content was missing

The latter became obvious because you needed to apply a CSS correction for the background which shouldn’t be necessary. This is what fixes the issue.

The code had some other weird parts which I corrected

• aria-labelledby should be present in the modal element, and point to the title
• data-keyboard has no meaning in HTML or Bootstrap, at least I couldn’t find anything. If it was intended to deactivate keyboard control: That’s a horrible thing to do
• Popper is not necessary for modals

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<button type="button" class="w-50 " data-bs-toggle="modal" data-bs-target="#filterModal">
    <i class="fa fa-filter"></i>
    modal without static backdrop
  </button>

<div class="modal fade" id="filterModal" tabindex="-1" aria-hidden="true" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"> item 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="form-check">
          <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>
          <label class="form-check-label" for="radio1">item2</label>
        </div>
        <div class="form-check">
          <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">
          <label class="form-check-label" for="radio2">  item 3</label>
        </div>
      </div>
    </div>
  </div>
</div>