I have a Bootstrap modal that opens successfully upon clicking a button, but it doesn’t close when I click outside of it, which is the desired behavior. How can I implement this functionality?

Here’s my button code:

<div class="col-md-3 mb-3 text-center">
    <button id="spread-truth-button" class="faith-button system_page_button btn btn-custom btn-block" type="button" data-bs-toggle="modal" data-bs-target="#shareModal">Spread the truth!</button>
</div>

And here’s my modal code:

<div id="shareModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">×</span>
        <p class="centered-text form-labels">Broadcast the Arcane Cards</p>
        <div class="social-media-button-container">
            <button class="social-media-share-button" onclick="shareOnFacebook()">
                <img src="{% static 'icon-facebook.png' %}" alt="Share on Facebook">
            </button>
            <button class="social-media-share-button" onclick="shareOnX()">
                <img src="{% static 'icon-x.png' %}" alt="Share on X">
            </button>
            <button class="social-media-share-button" onclick="shareOnInstagram()">
                <img src="{% static 'icon-instagram.png' %}" alt="Share on Instagram">
            </button>
            <button class="social-media-share-button" onclick="shareOnLinkedIn()">
                <img src="{% static 'icon-linkedIn.png' %}" alt="Share on LinkedIn">
            </button>
        </div>
        <input type="text" value="https://www.example.com/system_page" id="shareLink" style="display: none;">
    </div>
</div>

How can I modify this code to make the modal close when clicking outside of it?

I attempted to modify the modal code by adding various attributes and JavaScript functions, but none of my attempts resulted in the desired behavior of the modal closing upon clicking outside of it.

For example, I tried adding the data-bs-dismiss=”modal” attribute to the modal-content div, as well as adding JavaScript functions to handle clicks outside the modal. However, these attempts did not produce the expected outcome.

I expected that by adding the appropriate attributes or JavaScript functions, the modal would close when clicking outside of it, as is the default behavior in Bootstrap modals. However, despite multiple attempts, the modal continues to stay open regardless of where I click on the page.