[рони]

Malleys,
максимум на что хватает моего разумения ...

<dialog id="secretDialog">
    Пора выполнить действие
    <span class="actions">
        <button id="action-1">Выполнить</button>
        <button id="action-2">Отвергнуть</button>
    </span>
</dialog>

<script>
var dialog = document.getElementById("secretDialog");
// кол-во дней между показами диалога
var days = 1;
// некоторый промежуток времени после открытия сайта, через который окно вызывается
var timeout = 2000;
var D = 24 * 3600 * 1000;
var date = new Date();
date.setHours(0,0,0,0);
var t = date.getTime();
var lastT = +localStorage.dialogLastT || 0;
if(t - lastT >=  D  * days)
    setTimeout(dialog.setAttribute.bind(dialog, "open", "true"), timeout);

dialog.addEventListener("click", function(event) {
    var button = event.target;
    if(!button.matches(".actions button")) return;
    localStorage.dialogLastT = t;
    this.removeAttribute("open");
    // какие-то действия при нажатии на кнопки
});
</script>

<style>
#secretDialog {
    all: unset;
    position: absolute;
    top: 20px; left: 20px;
    right: 20px;
    z-index: 100;
    margin: auto;
    width: max-content;
    max-width: calc(100% - 40px);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .25s;
    will-change: opacity, transform;
    box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
    padding: 10px 30px;
    color: #333;
    border-radius: 100px;
    background: #f1f5f5;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-10px) scale(.95);
}

#secretDialog[open] {
    pointer-events: all;
    opacity: 1;
    transform: translateY(0px) scale(1);
}

#secretDialog .actions button {
    font: inherit;
    border: none;
    display: inline-block;
    padding: 8px 10px;
    background: #e1e5e5;
    border-radius: 4px;
    margin: 5px;
    color: #333;
}
</style>