Bootstrap 4 - Modal Form close on button only

Question

I have a modal that is displayed in the loading of the page with some fields, where I need it to be closed just on the exit button, but if I trigger the click outside the modal it closes. I’m using bootstrap 4 with Angular 7.

Does anyone know if there is componenet for this case ?

<div class="modal fade" id="exampleModalCenterAntenas2" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterAntenasTitle"
    aria-hidden="true">
...
</div>

Answer 1

Just include the attribute data-backdrop="static" in modal:

           ↓
<div data-backdrop="static" class="modal fade" id="exampleModalCenterAntenas2" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterAntenasTitle"
    aria-hidden="true">
...
</div>

According to the documentation, this option disables the modal closure by clicking on the transparent layer:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Abrir modal
</button>

<!-- Modal -->
<div class="modal fade" data-backdrop="static" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 2

I resolved as follows.

Using the call by the button.

 <a data-controls-modal="your_div_id"
   data-backdrop="static"
   data-keyboard="false"
   href="#">

Or

On the page loading.

$('#myModal').modal({
  backdrop: 'static',
  keyboard: false
});

Thanks a lot.