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

【问题标题】：why Custom Error Dialog Box keeps disappearing?为什么自定义错误对话框不断消失？
【发布时间】：2017-01-13 13:49:10
【问题描述】：

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

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;
}

【问题讨论】：

我无法重现您的错误，您可以添加完整的 html 和 JS 代码吗？ “ErrorDialogBox”元素是在哪里创建的？
您也可以发布“Validation_for_SignUp”功能的内容
@n1kkou 1 在我点击注册后调用该对话框以进行测试，
@tfidelis 我在函数本身中创建了它，我在 javascript 的最后一行创建了一个 var Error = CustomError()

标签： javascript html css error-handling customdialog

【解决方案1】：

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

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

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

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

【讨论】：

是的 :) 谢谢 :)