Почему диалоговое окно Custom Error продолжает исчезать?

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 Хи Ра _ Gogo Там нет никаких проблем с вашим кодом, за исключением, что Зарегистрироваться кнопка отправляет вашу форму, которая в конечном итоге перезагружает страницу. Вот почему ваш диалог немедленно исчезает, и для проверки fy, что я говорю, просто попробуйте запустить Error.render(); Функция через консоль или, может быть, с другой кнопки вне формы, как:

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

При нажатии на эту кнопку появится диалоговое окно, и это не будет так, может быть, исчезает, вы можете попробовать изменить свой код таким образом, что делает не отправлять немедленно, но после того, как ошибка не найдена.

Надеюсь, это ответ на ваш вопрос.