I have an html div fade that I want to do something when a user clicks outside the div and close it, or click on the dismiss button in the div itself.

I can easily fire an EventListener for the dismiss button but is there a way to handle user dismissing the div by clicking outside it?

Note: The current design is the div closes if user clicks outside it.

<div class="modal fade" id="show_laptop_instructions" tabindex="-1" role="dialog" aria-labelledby="show_laptop_instructions_title" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" style="max-width: fit-content" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal_title" style="font-size: large">Laptop Instructions for <strong><span style="color: green;"  id="msg_hostname"></span></strong></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 class=container>
              <details open>
                  <summary ><strong>Instructions</strong></summary>
                    <div id="msg_instructions"></div>
              </details>
          </div>
      </div>

      <div class="modal-footer">
        <button type="button" id="dismiss_laptop_instructions" class="btn btn-secondary" data-dismiss="modal">Dismiss</button>
      </div>
    </div>
  </div>
</div>