每当您提交具有正确值的表单时，我都试图打开一个窗口，但它没有打开，您能帮我吗？我试着摆弄它，试着做一些事情，但我就是无法让它发挥作用。
<form>
<div class="box">
<input name="name" class="form-tag" placeholder="Name" disabled/>
<input type="text" name="name" id="fullname" class="form-control" required/>
<input type="email" name="email" class="form-tag" placeholder="Email" disabled/>
<input type="email" name="email" id="emailaddress" class="form-control" required/>
<div class="button">
<button id="button" type="submit" class="btn btn-light btn-lg modal-button">Submit</button>
</div>
</div>
</form>
<div class="modal-bg">
<div class="modal">
<h5>congratulations!</h5>
<span class="modal-close">x</span>
</div>
</div>
var modalButton = document.querySelector('.modal-button');
var modalBg = document.querySelector('.modal-bg');
var modalClose = document.querySelector('.modal-close');
document.getElementById("button").onsubmit = checkForm();
function checkForm(){
if (document.getElementById('fullname').value == "" && document.getElementById('emailaddress').value == ""){
return;
}
else{
return modalButton.addEventListener('click',function(){
modalBg.classList.add('bg-active');
});
modalClose.addEventListener('click',function(){
modalBg.classList.remove('bg-active');
})
}
}
在下面的代码中，我们有一个表单。每当我们提交表单，并且字段不为空时，它就会显示模式窗口。如果字段为空，则显示一个警报窗口。
请注意，按钮不会提交表单。相反，它只验证字段并显示模式窗口。如果要提交表单，可以在脚本中添加
document.forms("myForm").submit();。
// Get the modal
var modal = document.getElementById("myModal");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
document.getElementById("button").onclick = function() {
if(document.getElementById("fullname").value === "" || document.getElementById("emailaddress").value === ""){
alert("Fields Empty");
}else{
modal.style.display = "block"; //Display modal if fields has some value
}
return false;
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.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 */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<html>
<head>
</head>
<body>
<h2>Please fill out the form</h2>
<form id="myForm">
<div class="box">
<label for="fullname" class="form-tag" >Name :</label>
<input type="text" name="name" id="fullname" class="form-control" required/></br>
<label for="email" class="form-tag" >Email :</label>
<input type="email" name="email" id="emailaddress" class="form-control" required/></br>
<div class="button">
<button id="button" class="btn btn-light btn-lg modal-button">Submit</button>
</div>
</div>
</form>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Congrats!!</p>
</div>
</div>
</body>
</html>