1

「確認」のjavascriptダイアログボックスをパーソナライズ（CSS、ボタンなどを設計）したいのですが、永続性を維持したいと思います。カウントダウン後にダイアログボックスが表示されるため、ユーザーがブラウザの別のタブを実行している場合や別のアプリケーションを実行している場合でも、ダイアログボックスにフォーカスを合わせることが非常に重要です...

私はウェブで多くの美しい解決策を見つけましたが、それらはすべて永続性のこの側面を無視しています。

よろしく

4

2 に答える 2

0

//HTML コード

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <dialog id="dialog">
      <h4 id="dialog_header">Datenschutzhinweis</h4>
      <p id="dialog_text">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
      </p>
      <label
        ><input
          type="checkbox"
          id="dialog_checkbox"
          value="checked"
        />Einverstanden</label
      >
      <button onclick="Dialog_close()">Dialog schließen</button>
    </dialog>

    <script src="dialogJS.js"></script>
  </body>
</html>

//JSコード

function Dialog_close() {
  var dialog_checkbox = document.getElementById("dialog_checkbox");
  var dialog = document.getElementById("dialog");
  var dialog_text = document.getElementById("dialog_text");
  if (dialog_checkbox.checked) {
    dialog.close();
  } else {
    dialog_text.style.color = "red";
  }
}

document.getElementById("dialog").showModal();
于 2020-11-26T15:07:32.073 に答える