Question

我想个性化（设计CSS，按钮......）a＆＃34;确认＆＃34; javascript对话框，但希望保持它的持久性。倒计时后会显示对话框，因此即使用户正在运行浏览器的另一个选项卡或运行其他应用程序，它也会非常重要...

我在网上找到了许多漂亮的解决方案，但他们都忽略了这种持久性的方面。

此致

Answer 1

坚持不懈我不确定你的意思。如果您正在寻找一种解决方案，使对话框阻止用户甚至能够关闭标签，除非它们提供数据，这是不可能的。

但是我最近开发了自己的对话框。使用css非常容易设计风格，请查看底部的演示以及网站http://dialogjs.com/

在实际发布您的网站之前，我必须要求您确保它运行顺畅，因为它不是100％无错误。同时观看可能会有重大变化的空间，因为它只是一个测试版本。

现在用于确认对话框，您只需

new Dialog()
.confirm("Continue?", function(result){
    this.data.continue = result;
})
.confirm(function(){return "Are you sure you wish to "+ (this.data.continue ? "continue" : "cancel")}, function(result){
})

您也可以编写自己的对话框类型http://jsfiddle.net/q5zL7y6e/1/

Answer 2

// 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();

个性化的javascript对话框？

2 个答案: