How to catch a click outside a Modal which closes it?

Note: the Bootstrap modal has this build in ;)

You can just create a simple fixed div that you can click

<div class="modal-overlay" style="display: none;"></div>

<div class="modal" style="display: none;">
    // Your modal stuff
</div>

<button class="modal-button">Open modal</button>

$('.modal-button').on('click', function() {
    $('.modal').show();
    $('.modal-overlay').show();
}

$('.modal-overlay').on('click', function() {
    $('.modal-overlay').hide();
    $('.modal').hide();
});

And for the basic styles

.modal {
    width: 80%;
    position: fixed;
    top: 10%;
    left: 10%;
    z-index: 100;
    background: red;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    background: black;
}

Hello! @bobbybouwmann , Currently Im using vuestrap because it is the easiest solution for not typing more than I should , But I have a problem. sometimes I click outside the modal which is showing in the screen so It closes, but the

<modal v-bind:show="modalName.showMod" v-bind:effect="'fade'" v-bind:width="800">

modalName.showMod remains in its True value, so If I click again lets say on the Create Button, it doesnt display the modal. So I need to catch that click outside the modal to change its state to false. But I dont know how, neither where should I enter the code. Im also using .vue So I have a <template> tag because that modal is a component of another file.

@fercho , I am in same issue. Thanks.