why Custom Error Dialog Box keeps disappearing?

Question

I want to make a custom error dialog box, this is the code i used, but whenever i run it, it shows for a second then disappear, I can't find the problem in this code, can anyone help me?

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

Hi @wang Hee Ra _ Gogo There is no problem with your code except that the Sign up button posts your form which eventually reload the page, This is the reason why your Dialog dissapear immediatly, And to verify what i'm saying just try to run your Error.render(); function through console or maybe from another button outside the form like:

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

Clicking this button will show the dialog box and it won't dissapear So maybe you can try to alter your code in a way that does not submit immediatly but after no error is found.

i hope this answer your qustion.