javascript - 为什么自定义错误对话框总是消失？

Question

我想制作一个自定义错误对话框，这是我使用的代码，但是每当我运行它时，它会显示一秒钟然后消失，我在这段代码中找不到问题，有人可以帮助我吗？

HTML:

<form name="signup" action="" onSubmit="return Validation_for_SignUp" method="post">
    <h2 id = "FormTitle"> New Member? Sign up first! </h2>  
    <label>Username</label>
    <input type="text" name="username" id="name"/>
    <label>Email</label>
    <input type="text" name="email" id="email"/>
    <label>Password</label>
    <input type="password" name="password" id="password"/>                  
    <label>Confirm Password</label>                 
    <input type="password" name="cpassword" id="cpassword"/>                    
    <button id="Register"onclick="Error.render('Please check the field')"> Sign Up </button>            
</form>

JavaScript:

<script>
  function CustomError()
  {
     this.render = function (dialog)
     {
       var WinWidth = window.innerWidth;
       var WinHeight = window.innerHeight;
       var ErrorDialog = document.getElementById('ErrorDialog');
       var ErrorDialogBox = document.getElementById('ErrorDialogBox');
       ErrorDialog.style.display = "block";
       ErrorDialog.style.height = WinHeight + "px";
       ErrorDialogBox.style.left = (WinWidth/2) - (550 * .05) + "px";
       ErrorDialogBox.style.top = "100px";
       ErrorDialogBox.style.display = "block";
       document.getElementById ('DialogHead').innerHTML = "Warning!";
       document.getElementById ('DialogBody').innerHTML = dialog;
       ddocument.getElementById ('DialogFoot').innerHTML = '<button onclick = "Error.ok()"> OK </button>';
      }
      this.ok = function ()
      {
        document.getElementById('ErrorDialogBox').style.display = "none";
        document.getElementById("ErrorDialog").style.display = "none"
      }
    }
    var Error = new CustomError();
</script>

CSS:

#ErrorDialog
{
  display: none;
  opacity: .8;
  position: fixed;
  top: 0px;
  left: 0px;
  background: black;
  width: 100%;
  z-index: 10;
}
#ErrorDialogBox
{
 display: none;
 position: fixed;
 background: white;
 border-radius: 7px;
 width: 550px;
 z-index: 10;
}
#DialogHead 
{
 background: #666;
 font-size: 19px;
 padding: 10px;
 color: #CCC;
}
#DialogBody
{
 background: #333;
 padding: 20px;
 color: #FFF;
}
#DialogFoot
{
 background: #666; 
 padding: 20px;
 color: #FFF;
}

Answer 1

嗨@wang Hee Ra _ Gogo 除了注册按钮发布您的表单并最终重新加载页面之外，您的代码没有问题，这就是您的对话框立即消失的原因，并验证我在说什么只需尝试运行您的 Error.render();通过控制台或表单外的另一个按钮运行，例如:

<a href="javascript:Error.render('Please check the field')">TEST IT</a>

单击此按钮将显示对话框，并且它不会消失，因此也许您可以尝试以不立即提交但未发现错误后提交的方式更改代码。

我希望这能回答您的问题。