Can we show custom popup in js when user tries to close the page without showing default alert message?

<div id="pain" class="modal">
    <div class="popup">
        <div class="popup-content">
            <p>you have not saved your data , 
            Would you like to save it before leaving ?</p>
            <button id="cancel">Cancel</button>
            <button id="leave">Leave</button>
        </div>
    </div>  
</div>

var popup_open = false;
var popupElement = document.getElementById('pain');
window.addEventListener("beforeunload", function (event) {
    event.returnValue = false;
    event.preventDefault();
    popupElement.style.display = 'block';
    popup_open = true;
});