为什么自定义错误对话框不断消失？

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>

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

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

为什么自定义错误对话框不断消失？

why Custom Error Dialog Box keeps disappearing?

html

javascript

css

error-handling

customdialog