模态弹出框立即消失

Question

我是 Web 开发的初学者，我有一个表格，您可以在其中输入您的姓名和姓氏。然后通过单击提交，一个模式框必须在屏幕上弹出，说明您的购买已完成，然后单击确定按钮，您将移动到另一个 html 页面。在我的表单中，我有一个函数，当您提交表单时，它会检查姓名和姓氏是否为字符串。如果是，您必须使用函数打开模态框，否则返回 false 并再次输入。在我的页面中，模态框会弹出一秒钟，然后页面会重新加载。基本上我试图调用一个函数，在 name 和 surname 被验证后弹出一个模式框。 感谢您帮助指导我解决此任务。 先感谢您 。 我的代码：

function validateStrings(){

 var x = document.getElementById("first");
 var y = document.getElementById("last");


 if(!(/\d/.test(x.value)) && !(/\d/.test(y.value))){
  
  }
  
 else{
    alert('no submit');  
    return false;
  }

   popbox(); //after checking if inputs are strings pop up the box


}


function popbox(){

var btn = document.getElementById("submit");
var modal = document.getElementById("mymodal");
var span = document.getElementsByClassName("close")[0];
 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
 span.onclick=function(){

     modal.style.display="none";


 }

//when user clicks on window outside of box close the modal

window.onclick=function(){
      
    if (event.target == modal) {
     modal.style.display = "none";
    }
  
  
   }

} 

#ondel{
	
position:relative;
margin:10px auto 0px;
width:500px;
height:250px;
box-sizing:border-box;	
background:rgb(0,0,0,0.5);
padding:40px;	
border-radius:50px;	
	
	
}	


.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

footer{

font-size:10px;	
	
}	

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

<div class = "on-delivery-container" id = "ondel">
 
    <form class = "pay">
	
      <label for "First-name"> First Name </label>
	  <input type = "text" name = "fname" id="first" required>
    	 
	  <label for "Last-name"> Last Name </label>
	  <input type = "text" name = "sname" id="last" required> 
     
	  <button type = "button" class = "cancelbtn" onclick = "returntostep2()">Go back</button>
      <button type = "submit" class = "submitbtn" onclick= "return validateStrings()">Submit</button> //valideStrings() checks my input
    </form>
    
    //my modal box 
    <div class = "modal" id = "mymodal">
  
    <div class = "modal-content" id = "mymodalcontent">
	    <span class="close">&times;</span>
        <p>  Your purchase is complete ! </p>
		<button class = "submitbtn" type = "button" onclick = "window.location.href='Start_page.html';"> OK </button> 
    </div>	
      <footer> &copy; BookHouse All Rights Reserved. </footer> 
  </div>
    
 
 
 </div>

Answer 1

将点击事件传递给您的 validateStrings() 并使用 e.preventDefault() 阻止提交按钮刷新页面。或者，将按钮命名为其他名称，然后在弹出窗口或 validateStrings 函数中准备好后手动提交表单