0

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>
Omar Abdelrazik
  • 683
  • 2
  • 9
  • 30
  • 1
    Please turn your code into a runnable snippet that exhibits your problem. – Lee Taylor Jun 25 '22 at 23:44
  • answer is here.. https://stackoverflow.com/a/22208662/7856807 – Kopi Bryant Jun 27 '22 at 05:27
  • Does this answer your question? [Disable click outside of bootstrap modal area to close modal](https://stackoverflow.com/questions/22207377/disable-click-outside-of-bootstrap-modal-area-to-close-modal) – Kopi Bryant Jun 27 '22 at 05:27

0 Answers0