[Malleys]

ABitOfJS,

<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();
var t = date.getTime() + date.getTimezoneOffset() * 60 * 1000;
var lastT = +localStorage.dialogLastT || 0;

function getDay(t) {
	return Math.floor((t - 0.25 * D) / D);
}

if(t - lastT > 0.25 * D && getDay(t) - getDay(lastT) >= 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>