Question

我正在创建一些自定义警报对话框，而当框格式正确时，我插入的确定按钮没有响应。以下是要参考的代码。

function CustomAlert(){
    this.render = function(dialog){
      ...
      ...
      document.getElementById('dialogboxfoot').innerHTML = "<button onclick = 'Alert.ok()'>OK</button>";
    }

    this.ok = function(){
      document.getElementById('dialogbox').style.display = "none";
      document.getElementById('dialogoverlay').style.display = "none";
    }
  }

  var Alert = new CustomAlert();

  $('#button1').click(function(){
    Alert.render("Heyooo!!!");
  })

Alert.render函数正确触发。当我尝试触发Alert.ok函数（使用innerHTML函数插入）时，我得到了“未捕获的ReferenceError：未定义警报”，引用了我的index.html文件的第1行，即DOCTYPE声明。

为什么在此上下文中调用时未定义“警报”？

Answer 1

你的问题很模糊。请记住，JavaScript alert()方法无法设置样式，因此您需要创建自己的模态。我使用这样的（非常敏感）：

function styledAlert(message){
  
  document.getElementById('alertText').innerHTML = message;
  document.getElementById('alertWrapper').style.display = 'block';
  
  
  }

#alertWrapper {
  position: absolute;
  display: none;
  top:0;
  left:0;
  right:0;
  bottom:0;
  }

#alertBox {
  position: fixed;
  top: 25%;
  bottom: 25%;
  right: 25%;
  left: 25%;
  background: rgba(0,0,0,0.7);
  border-radius: 25px;
  }

#alertAccept {
  position: absolute;
  bottom: 15px;
  right: 15px;
  }

#alertText {
  margin: 15px;
  color: white;
  }

<div id="alertWrapper"><div id="alertBox"><p id="alertText"></p><button id="alertAccept" onclick="document.getElementById('alertWrapper').style.display = 'none'">OK</button></div></div>

Type in an alert message: <input type="text" onblur="styledAlert(this.value)"/> And then blur the textbox to see the alert . . .

如果这不是您想要的，请将您的问题更具体地说明您正在寻找的最终结果。

自定义警报对话框 - 确定按钮没有响应

1 个答案: