<button class="modal-initialise">Modal</button>
<div id="overlay"><div>
<div class="modal">
    <div class="modal-header">
        Example modal
        <button class="modal-close">
            <img src="close-white24.svg" />
        </button>
    </div>
    <div class="modal-content">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit vero
        blanditiis delectus repellendus ducimus, adipisci totam temporibus
        nihil commodi quod expedita, sit, fugiat quibusdam voluptas.
    </div>
    <div class="action-btn">
        <button class="scl-btn scl-btn-primary">Action 1</button>
        <button class="scl-btn scl-btn-secondary">Action 2</button>
    </div>
</div>

javascript code:

const modalInitialise = document.querySelector(".modal-initialise");
const modalClose = document.querySelector(".modal-close");
const modal = document.querySelector(".modal");

modalInitialise.addEventListener("click", () => {
	document.querySelector(".modal").style.display = "block";
	document.querySelector("#overlay").style.display = "block";
	document.querySelector("#overlay").style.backgroundColor =
		"rgba(0, 0, 0, 0.5)";
});

modalClose.addEventListener("click", () => {
	document.querySelector(".modal").style.display = "none";
	document.querySelector("#overlay").style.display = "none";
});

document.addEventListener("mouseup", function (e) {
	var container = document.querySelector(".modal");
	if (!container.contains(e.target)) {
		container.style.display = "none";
		document.querySelector("#overlay").style.display = "none";
	}
});