Question

我想创建一个自定义警报，但我读到该警报无法自定义，因此我想创建一个可以编辑的新功能。

这是我正在制作的html网页。我已经在Stack Overflow和Google中搜索了答案。

alert("This is a normal alert.");
function specialAlert() {
//How do I get this?
}

我希望alert()是可编辑的，但不是可编辑的。

Answer 1

不可能。该函数由本机代码组成：

console.log(window.alert.toString());

摘自similar topic的答案：

[本机代码]表示它不是普通的Javascript函数。由本机代码组成的功能始终是浏览器提供的功能（或运行代码的任何环境）；您自己编写的任何Javascript函数通常都无法模仿它们。例如，window.history对象仅可以执行诸如history.back()之类的历史记录操作；如果window.history被覆盖，并且您没有保存对它或任何其他history对象的引用，则无法编写自己的函数来执行history.back()，因为{{ 1}}调用特权本机代码，该代码需要在可见Javascript和浏览器引擎之间建立接口。

许多由本机代码制成的功能无法用纯Javascript实现，包括.back()，因为它们使用了浏览器提供的特权功能。除非您要做的就是更改，否则可能会通过猴子修补alert来显示在警报框中的文本（或者根本没有显示警报）。< / p>

也就是说，在大多数情况下还是最好避免使用window.alert，因为它非常不友好。最好构造一个不会阻塞的适当模态。

Answer 2

幸运的是，我为您创建了一个快速警报示例：P

看一下代码，您就会明白。要带走的东西是1.如何使用位置：绝对2.如何从html元素添加和删除类，以及3.单击事件。享受

const alertButton = document.querySelector('.showAlert');
const customAlert = document.querySelector('.alert');
const closeAlert = document.querySelector('.closeAlert');
var tof = false;
alertButton.addEventListener("click", function(event) {
  if(!tof) {
    customAlert.classList.remove("displayNone");
    tof = !tof;
  } else {
    customAlert.classList.add("displayNone");
    tof = !tof;
  }
});

closeAlert.addEventListener("click", function(event) {
  tof = false;
  customAlert.classList.add("displayNone");
});

.alert{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 150px;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(50, 166, 243);
  color: white;
}

.alertContent {
  margin-right: auto;
  margin-left: 30px;
}
.closeAlert {
  margin-right: 30px;
}
.closeAlert:hover {
  cursor: pointer;
}

.displayNone {
  display: none;
}

<div class="alert displayNone">
  <div class="alertContent"> This is an alert which is cool</div>
  <div class="closeAlert">X</div>
</div>

<button class="showAlert">Show Alert</button>

此处的密码笔：https://codepen.io/mitchell-boland/pen/arBNBw

Answer 3

我猜您正在寻找一种通用外观的弹出警报窗口的更好样式。

因此，我建议尝试SweetAlert。

根据文档，它是浏览器默认弹出框的美观，响应迅速且可自定义的替代品。

单击链接并播放演示。

Answer 4

如何使用引导程序模式来显示消息呢？ Check it here

有没有办法查看诸如alert（）之类的预定义函数的内容？

4 个答案: